Ich möchte Bootstrap alert.js
Plugin als Front-End-Asset verwenden, aber nicht herausfinden, wie es funktioniert mit brunch-config.js
und npm
.Bootstrap js-Plugins zu brunch-config.js hinzufügen, um sie als Front-End-Assets zu verwenden?
Im Moment habe ich eine solche Brunch config (es fügt jQuery
und Bootstrap CSS Vermögenswerte):
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']
}
}
};
Plugin-Datei hier ist - ./node_modules/bootstrap/dist/js/umd/alert.js
.
Eine weitere Sache: Mit dieser Konfiguration Brunch
tatsächlich etwas tut, und fügt die benötigten ./node_modules/bootstrap/dist/js/boostrap.js
Datei /js/app.js
, die bereits die Alert
Plugin enthält.
jQuery
funktioniert einwandfrei, Bootstrap CSS funktioniert auch. Das einzige Problem - Bootstrap js plugins (es gibt keine Warnungen in der Konsole).
In meinem package.json
Ich habe diese Version von 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"
}
}