Rails 6 Asset Pipeline：如何在 application.js 中导入供应商脚本？

Question

我正在尝试在 application.js 下正确导入供应商 js 文件app/javascript/packs/application.js

这是当前的架构：

可以看到，我选择将供应商 js 文件放入app/javascrip/plugins/

我的结构application.js如下：

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

// Libraries/Vendor-plugins
require("jquery");
import 'bootstrap';
require('../plugins/chosen.min.js');
require('../plugins/magnific-popup.min.js');
require('../plugins/owl.carousel.min.js');
require('../plugins/rangeSlider');
require('../plugins/sticky-kit.min.js');
require('../plugins/masonry.min.js');
require('../plugins/mmenu.min.js');
require('../plugins/tooltips.min.js');
require('../plugins/custom');


// Custom functions
// import { myFunction } from '../components/myScrip';

document.addEventListener('turbolinks:load', () => {
});

custom.js通过这样做，位于 中的文件应该可以访问 jQuery app/javascript/plugins/custom.js，对吧？

为了清楚起见， 的custom.js形状如下：

(function ($) {
    "use strict";
    $(document).ready(function () {
      // ...
    }
})(this.jQuery);

但是当我运行服务器时，找不到 jQuery：

yarn add jquery@3.5.1 bootstrap@3.4.1我通过（供应商需要的旧版本）添加了 jQuery 和 bootstrap 。

我的 Webpack enviroment.js 是这样的：

const { environment } = require('@rails/webpacker');
const webpack = require('webpack');

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
);

module.exports = environment;

我试图在Ruby Guides 的 Asset Pipeline中找到答案。但似乎该教程有点过时了。

Answer 1

将新目录添加到 webpacker 的查找文件中。

添加config/webpacker.yml：

additional_paths: ['your/path']

在这个具体案例中：

additional_paths: ['app/javascript/plugins/']