[英]How To Add CSS/JS Dependencies To Phoenix Project?
I'm trying to add jquery to a Phoenix project. 我正在尝试将jquery添加到Phoenix项目中。
When I link to jquery direct in app.html.eex in the head tag like so: 当我在头标记的app.html.eex中链接到jquery,如下所示:
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
...It works. ...有用。
However, I don't want a web dependency. 但是,我不想要Web依赖。 I want jquery within the app.
我想在应用程序中使用jquery。
I've copied jquery.min.js to the web/static/js directory. 我已将jquery.min.js复制到web / static / js目录。 And referenced it in app.html.eex like so:
并在app.html.eex中引用它,如下所示:
<script src="<%= static_path(@conn, "/js/jquery.min.js") %>"></script>
It doesn't work. 它不起作用。
Copying jquery.min.js to app.js doesn't work either. 将jquery.min.js复制到app.js也不起作用。
Interesting enough when I place the JS between script tags directly in app.html.eex, it works. 有趣的是,当我直接在app.html.eex中将脚本标记放在JS之间时,它可以工作。
Only a direct link from the cloud and/or placing the JS between a script tag in app.html.eex is working?? 只有来自云的直接链接和/或将JS放在app.html.eex中的脚本标记之间才能正常工作?
Update: 更新:
Brunch is copying the JS to app.js in the priv directory. 早午餐正在将JS复制到priv目录中的app.js. But the application doesn't seem to have access to it.
但是应用程序似乎无法访问它。
What am I doing wrong. 我究竟做错了什么。
We recommend you to put vendor dependencies inside "web/static/vendor" because those dependencies are often not in ES6 nor work with JS loaders. 我们建议您将供应商依赖项放在“web / static / vendor”中,因为这些依赖项通常不在ES6中,也不适用于JS加载程序。 Also, when you add them to vendor, they will be automatically added to the built
app.js
by brunch. 此外,当您将它们添加到供应商时,它们将通过早午餐自动添加到构建的
app.js
。
Alternatively, you can follow Dmitry's feedback. 或者,您可以关注德米特里的反馈。 In this case, you can place the file inside "web/static/assets" and it will be copied as is to your application.
在这种情况下,您可以将文件放在“web / static / assets”中,它将按原样复制到您的应用程序中。 For example, by putting it at "web/static/assets/js/jquery-min.js", the script tag you have defined in your post should work.
例如,通过将其放在“web / static / assets / js / jquery-min.js”中,您在帖子中定义的脚本标记应该有效。
After studying the sample repository given in the comments, the bug seems to be in the ordering: bootstrap is being included in the app.js file before jquery. 在研究了评论中给出的示例存储库之后,错误似乎在于排序:在jquery之前,bootstrap被包含在app.js文件中。 You can fix this by adding the following to your brunch-config.js (a similar sample is already commented in there):
您可以通过将以下内容添加到您的brunch-config.js来修复此问题(类似的示例已在此处进行了注释):
order: {
before: [
"web/static/vendor/js/jquery.min.js",
"web/static/vendor/js/bootstrap-toggle.min.js"
]
}
I have to agree this is not obvious. 我不得不同意这一点并不明显。 Alternative solutions:
替代方案:
Order them in your vendor directory, for example: 1_jquery.min.js, 2_bootstrap-toggle.min.js, etc. 在供应商目录中订购它们,例如:1_jquery.min.js,2_bootstrap-toggle.min.js等。
Move the files to "web/static/assets/js/jquery-min.js" and so on and add explicit script tags for them in your pages 将文件移动到“web / static / assets / js / jquery-min.js”等,并在页面中为它们添加显式脚本标记
I hope this helps! 我希望这有帮助!
While copying libraries to static works, I don't like it at all, because it trashes git log
a lot for every update of every JS library, especially a big one. 在将库复制到静态工作时,我根本不喜欢它,因为它会为每个JS库的每次更新(尤其是大型库)更新
git log
。
Fortunately, Phoenix has official support for adding JS libs via npm/Brunch and it is present in the documentation: Static Assets - Javascript Libraries . 幸运的是,Phoenix官方支持通过npm / Brunch添加JS库,它存在于文档中: Static Assets - Javascript Libraries 。
This is how I've added jQuery
into my application: 这就是我在我的应用程序中添加
jQuery
方法:
Added jquery
with a version number to dependencies section of package.json
: 添加了带有版本号的
jquery
到package.json
依赖项部分:
{
...
"dependencies": {
...
"jquery": "3.2.1"
}
}
Performed install: 执行安装:
npm install --save
Added globals into npm
section of brunch-config.js
: 将全局变量添加到
brunch-config.js
npm
部分:
npm: {
enabled: true,
globals: {
$: 'jquery',
jQuery: 'jquery'
}
}
After app restart, I was able to use $
. 应用程序重启后,我可以使用
$
。
UPDATE for Phoenix 1.4 Phoenix 1.4的更新
Phoenix 1.4 switched from Brunch to Webpack. Phoenix 1.4从早午餐转为Webpack。
assets/package.json 资产/的package.json
{
...
"dependencies": {
...
"jquery": "3.3.1"
}
}
assets/webpack.config.js 资产/ webpack.config.js
const webpack = require('webpack');
...
plugins: [
...
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
assets/js/app.js (this one is optional, but required to make $ available in Chrome console) assets / js / app.js (这个是可选的,但需要在Chrome控制台中提供$ )
window.$ = window.jQuery = require("jquery");
Run 跑
(cd assets && npm install)
and restart Phoenix application. 并重启Phoenix应用程序。
Dependencies in Phoenix are managed by Brunch.io . 凤凰城的依赖关系由Brunch.io管理。 By default it copies everything from
/web/static/assets/
directory to /priv/static
. 默认情况下,它会将
/web/static/assets/
目录中的所有内容复制到/priv/static
。
So you can simply create some directory like plugins
inside /web/static/assets/
and copy jquery.min.js
there. 所以你可以在
/web/static/assets/
创建一些类似plugins
目录,并jquery.min.js
那里复制jquery.min.js
。
I don't have enough reputation to post a comment to the answer from @denis.peplin (in which the link is outdated). 我没有足够的声誉来发表对@denis.peplin答案的评论(其中链接已过时)。 But it seems this is the official post referred to (again there is a Javascript Libraries section)...
但似乎这是官方帖子(再次有一个Javascript Libraries部分)...
phoenixframework-blog-static-assets phoenixframework -博客-静态资产
In my case the following worked: 在我的情况下,以下工作:
Add the dependency to package.json
将依赖项添加到
package.json
"dependencies": {
"jquery": "3.2.1"
},
Then in assets/js/app.js
add the following line... 然后在
assets/js/app.js
添加以下行...
import $ from "jquery"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.