虽然将库复制到静态文件夹可以实现功能,但我并不喜欢这种方式。因为每当更新JS库时,特别是大型库,都会使git log
变得非常混乱。
幸运的是,Phoenix框架官方支持通过npm/Brunch添加JS库,并在文档中有相关说明:静态资源 - JavaScript库。
以下是我如何将jQuery
添加到我的应用程序中:
注意:此方法适用于Phoenix 1.3,Phoenix 1.4需要查看相应的说明
在package.json
的依赖部分添加带版本号的jquery
:
{
...
"dependencies": {
...
"jquery": "3.2.1"
}
}
执行了安装操作:
npm install --save
将全局变量添加到 brunch-config.js
的 npm
部分:
Translated text:
将全局变量添加到 brunch-config.js
的 npm
部分:
npm: {
enabled: true,
globals: {
$: 'jquery',
jQuery: 'jquery'
}
}
应用程序重新启动后,我能够使用 $
。
Phoenix 1.4 更新
Phoenix 1.4 从 Brunch 切换到 Webpack。
assets/package.json
{
...
"dependencies": {
...
"jquery": "3.3.1"
}
}
assets/webpack.config.js
const webpack = require('webpack');
...
plugins: [
...
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
assets/js/app.js(这个是可选项,但需要使得在Chrome控制台中可以使用$)
window.$ = window.jQuery = require("jquery");
运行
(cd assets && npm install)
并重新启动Phoenix应用程序。