在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->样式表（文件夹）下，而不是在资产->样式表下吗？

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

更新

您可以添加样式文件，如下所示：

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. 在extract_css: true中设置config/webpacker.yml

Answer 2

您的文件夹需要具有以下结构：

app / javascript / packs / application.js

application build.gradle

app / javascript / custom / index.js

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

require("custom")

例如，require("myScript") require("mySecondScript") 和myScript.js文件将位于同一文件夹，即mySecondScript.js。