kov*_*ack 5 wordpress npm twitter-bootstrap brunch
我想使用Bootstrap的alert.js
插件作为前端资产,但无法弄清楚如何使用brunch-config.js
和使用它npm
.
目前我有这样的早午餐配置(它添加jQuery
和Bootstrap css到资产):
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']
}
}
};
Run Code Online (Sandbox Code Playgroud)
插件文件在这里 - ./node_modules/bootstrap/dist/js/umd/alert.js
.
还有一件事:使用此配置Brunch
实际执行某些操作并添加到已包含插件/js/app.js
的所需./node_modules/bootstrap/dist/js/boostrap.js
文件中Alert
.
jQuery
工作正常,Bootstrap css也可以.唯一的问题 - Bootstrap js插件(控制台中没有警告).
在我的package.json
我有这个版本的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"
}
}
Run Code Online (Sandbox Code Playgroud)
添加require("bootstrap");
到末尾app.js
为我解决了问题。我还远远没有正确理解 brunch / bootstrap,但据我所知,bootstrap 的 javascript 部分只是 jQuery 插件的集合。需要 bootstrap 将插件添加到全局jQuery
对象(已在您的 中呈现brunch-config.js
)。