[英]How To Add CSS/JS Dependencies To Phoenix Project?
我正在尝试将jquery添加到Phoenix项目中。
当我在头标记的app.html.eex中链接到jquery,如下所示:
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
...有用。
但是,我不想要Web依赖。 我想在应用程序中使用jquery。
我已将jquery.min.js复制到web / static / js目录。 并在app.html.eex中引用它,如下所示:
<script src="<%= static_path(@conn, "/js/jquery.min.js") %>"></script>
它不起作用。
将jquery.min.js复制到app.js也不起作用。
有趣的是,当我直接在app.html.eex中将脚本标记放在JS之间时,它可以工作。
只有来自云的直接链接和/或将JS放在app.html.eex中的脚本标记之间才能正常工作?
更新:
早午餐正在将JS复制到priv目录中的app.js. 但是应用程序似乎无法访问它。
我究竟做错了什么。
我们建议您将供应商依赖项放在“web / static / vendor”中,因为这些依赖项通常不在ES6中,也不适用于JS加载程序。 此外,当您将它们添加到供应商时,它们将通过早午餐自动添加到构建的app.js
。
或者,您可以关注德米特里的反馈。 在这种情况下,您可以将文件放在“web / static / assets”中,它将按原样复制到您的应用程序中。 例如,通过将其放在“web / static / assets / js / jquery-min.js”中,您在帖子中定义的脚本标记应该有效。
在研究了评论中给出的示例存储库之后,错误似乎在于排序:在jquery之前,bootstrap被包含在app.js文件中。 您可以通过将以下内容添加到您的brunch-config.js来修复此问题(类似的示例已在此处进行了注释):
order: {
before: [
"web/static/vendor/js/jquery.min.js",
"web/static/vendor/js/bootstrap-toggle.min.js"
]
}
我不得不同意这一点并不明显。 替代方案:
在供应商目录中订购它们,例如:1_jquery.min.js,2_bootstrap-toggle.min.js等。
将文件移动到“web / static / assets / js / jquery-min.js”等,并在页面中为它们添加显式脚本标记
我希望这有帮助!
在将库复制到静态工作时,我根本不喜欢它,因为它会为每个JS库的每次更新(尤其是大型库)更新git log
。
幸运的是,Phoenix官方支持通过npm / Brunch添加JS库,它存在于文档中: Static Assets - Javascript Libraries 。
这就是我在我的应用程序中添加jQuery
方法:
添加了带有版本号的jquery
到package.json
依赖项部分:
{
...
"dependencies": {
...
"jquery": "3.2.1"
}
}
执行安装:
npm install --save
将全局变量添加到brunch-config.js
npm
部分:
npm: {
enabled: true,
globals: {
$: 'jquery',
jQuery: 'jquery'
}
}
应用程序重启后,我可以使用$
。
Phoenix 1.4的更新
Phoenix 1.4从早午餐转为Webpack。
资产/的package.json
{
...
"dependencies": {
...
"jquery": "3.3.1"
}
}
资产/ 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应用程序。
凤凰城的依赖关系由Brunch.io管理。 默认情况下,它会将/web/static/assets/
目录中的所有内容复制到/priv/static
。
所以你可以在/web/static/assets/
创建一些类似plugins
目录,并jquery.min.js
那里复制jquery.min.js
。
我没有足够的声誉来发表对@denis.peplin答案的评论(其中链接已过时)。 但似乎这是官方帖子(再次有一个Javascript Libraries部分)...
在我的情况下,以下工作:
将依赖项添加到package.json
"dependencies": {
"jquery": "3.2.1"
},
然后在assets/js/app.js
添加以下行...
import $ from "jquery"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.