在 Rails 6 上添加外部 js 文件

Question

我在app->javascript->packs下创建了一个名为“custom”的文件夹，并放置以下外部js：

• metisMenu.min.js
• startmin.js

然后在 app->javascript->packs->application.js 下我需要上面提到的 js 插件：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("custom/metisMenu.min").start()
require("custom/startmin").start()
require("channels")


import 'bootstrap'
import './stylesheets/application.scss'

不幸的是，这仍然不起作用。知道我做错了什么吗？

由于 Rails 6 正在使用 webpacker，是否可以将所有自定义 css 放在 app->javascript->packs->stylesheets（文件夹）而不是 assets->stylesheets 下？

Answer 1

您可以像这样添加自定义 js 文件：

1. 将你的js文件添加到app/javascript文件夹

   app/javascript/custom/metisMenu.min.js
   app/javascript/custom/startmin.js
   

2. 需要app/javascript/packs/application.js中的js文件

   require("@rails/ujs").start()
   require("turbolinks").start()
   require("@rails/activestorage").start()
   
   # custom js files
   require("custom/metisMenu.min")
   require("custom/startmin")
   

3. 将<%= javascript_pack_tag 'application' %> 添加到application.html.erb

更新

您可以像这样添加 style 文件：

1. 将您的样式文件添加到app/javascript 文件夹

   app/javascript/stylesheets/metisMenu.min.scss
   

2. 在app/javascript/packs/application.js中导入样式文件

   import "stylesheets/metisMenu.min"
   

3. 将<%= stylesheet_pack_tag 'application' %> 添加到application.html.erb
4. 在config/webpacker.yml 中设置extract_css: true

Answer 2

您的文件夹需要像这样构造：

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("custom")

app/javascript/custom/index.js

require("myScript")
require("mySecondScript")

例如，myScript.js 和 mySecondScript.js 文件将位于同一文件夹中，即 app/javascript/custom。