브런치에서 파운데이션 6 JS를로드하는 방법?

Question

Phoenix/Brunch 앱에서 Foundation 6 JS 플러그인을 사용하고 싶지만 Foundation 스크립트를 올바르게 연결하는 방법을 알 수 없습니다. 내가 아는 한 jQuery 후에로드해야하며 .foundation() 함수로 확장해야합니다. 브런치 문서는 내가 (그 설정에 실수 몇 가지를 만들 수도 매우 명시되지

exports.config = { 
    files: { 
    javascripts: { 
     joinTo: "js/app.js", 
     order: { 
     before: [ 
      "node_modules/jquery/dist/jquery", 
      "node_modules/foundation-sites/js/foundation.core", 
      "node_modules/foundation-sites/js/foundation.topbar" 
     ] 
     } 
    }, 
    stylesheets: { 
     joinTo: "css/app.css" 
    }, 
    templates: { 
     joinTo: "js/app.js" 
    } 
    }, 

    conventions: { 
    assets: /^(web\/static\/assets)/, 
    ignored: [ 
     /\/_.*/ 
    ] 
    }, 
    paths: { 
    watched: [ 
     "web/static", 
     "test/static" 
    ], 
    public: "priv/static" 
    }, 

    plugins: { 
    babel: { 
     ignore: [/web\/static\/vendor/, /web\/static\/elm/] 
    }, 
    eslint: { 
     pattern: /^web\/static\/js\/.*\.js?$/ 
    }, 
    sass: { 
     mode: 'native', 
     options: { 
     includePaths: [ 
      'node_modules/foundation-sites/scss' 
     ] 
     } 
    } 
    },  

    modules: { 
    autoRequire: { 
     "jquery":   "node_modules/jquery/dist/jquery", 
     "foundation_core": "node_modules/foundation-sites/js/foundation.core", 
     "foundation_topbar": "node_modules/foundation-sites/js/foundation.topbar", 
     "js/app.js":   ["web/static/js/app"] 
    } 
    }, 

    npm: { 
    enabled: true, 
    whitelist: ["phoenix", "phoenix_html", "jquery", "foundation-sites", "scrollreveal"], 
    globals: { 
     $:  'jquery', 
     jQuery: 'jquery', 
    } 
    } 
}; 

package.json

"dependencies": { 
    "foundation-sites": "^6.2.3", 
    "jquery": "^3.1.0", 
    "sass-brunch": "^2.6.3", 
}, 

브런치-config.jsautoRequire과 npm.globals을 사용하려고했을 때 - 거기에지도 키가 무엇입니까?) 그럼에도 불구하고 $ 및 jQuery 전역 변수는 t입니다. 여기 그리고 jQuery 라이브러리를 가리키고있다.

문제는 $(document).foundation이 정의되어 있지 않습니다.

Answer 1

브런치, 자산을 컴파일하지 않은 부분 "모듈"의 원인은 당신은 문자열 값을 사용 :

modules: { 
    autoRequire: { 
     "jquery":   "node_modules/jquery/dist/jquery", 
     "foundation_core": "node_modules/foundation-sites/js/foundation.core", 
     "foundation_topbar": "node_modules/foundation-sites/js/foundation.topbar", 
     "js/app.js":   ["web/static/js/app"] 
    } 
}, 

대신 당신이 경로가있는 문자열 배열을 사용해야합니다. 따라서 다음으로 변경하십시오 :

modules: { 
    autoRequire: { 
     "jquery":   ["node_modules/jquery/dist/jquery"], 
     "foundation_core": ["node_modules/foundation-sites/js/foundation.core"], 
     "foundation_topbar": ["node_modules/foundation-sites/js/foundation.topbar"], 
     "js/app.js":   ["web/static/js/app"] 
    } 
},