ブートストラップのalert.js
プラグインをフロントエンド資産として使用したいが、brunch-config.js
とnpm
を使って動作させる方法を理解できない。私は、このようなブランチの設定(それは資産にjQuery
とブートストラップCSSを追加して)持っている瞬間フロントエンドアセットとして使用するために、ブートストラップjsプラグインをbrunch-config.jsに追加しますか?
:
exports.config = {
files: {
javascripts: {
joinTo: "js/app.js"
},
stylesheets: {
joinTo: "css/app.css"
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
assets: /^(web\/static\/assets)/
},
paths: {
watched: [
"web/static",
"test/static"
],
public: "priv/static"
},
plugins: {
babel: {
ignore: [/web\/static\/vendor/]
}
},
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"]
}
},
npm: {
enabled: true,
whitelist: ["phoenix", "phoenix_html", "jquery", "bootstrap"],
globals: {
$: 'jquery',
jQuery: 'jquery'
},
styles: {
bootstrap: ['dist/css/bootstrap.css']
}
}
};
プラグインファイルはここにある - ./node_modules/bootstrap/dist/js/umd/alert.js
。
もう一つ:この設定Brunch
で実際に何かをして、すでにAlert
プラグインが含まれている必要./node_modules/bootstrap/dist/js/boostrap.js
ファイルを/js/app.js
する追加されます。
jQuery
が適切に動作し、ブートストラップCSSも機能します。唯一の問題は - ブートストラップのjsプラグインです(コンソールに警告はありません)。私package.json
で
私はブートストラップのこのバージョンがあります:app.js
の最後にrequire("bootstrap");
を追加
{
"repository": {},
"dependencies": {
"babel-brunch": "~6.0.0",
"bootstrap": "^4.0.0-alpha.2",
"brunch": "~2.1.3",
"clean-css-brunch": "~1.8.0",
"css-brunch": "~1.7.0",
"javascript-brunch": "~1.8.0",
"jquery": "^2.2.3",
"phoenix": "file:deps/phoenix",
"phoenix_html": "file:deps/phoenix_html",
"uglify-js-brunch": "~1.7.0"
}
}