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

【问题标题】：Rails 6 Asset Pipeline: How to import vendor scripts in application.js?Rails 6 Asset Pipeline：如何在 application.js 中导入供应商脚本？
【发布时间】：2020-07-22 01:05:54
【问题描述】：

我正在尝试在 app/javascript/packs/application.js 下的 application.js 中正确导入供应商 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', () => {
});

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

为了清楚起见，custom.js 具有以下形状：

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

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

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

我的 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;

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

【问题讨论】：

标签： jquery webpack asset-pipeline ruby-on-rails-6

【解决方案1】：

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

在config/webpacker.yml 中添加：

additional_paths: ['your/path']

在这种特定情况下：

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

【讨论】：

【解决方案2】：

好吧，我不知道这是否是最好的方法，但我设法解决了这个问题。

为此，我将custom.js 包装为：

const custom = () => {

  (function (root, factory) {
    if (root === undefined && window !== undefined) root = window;
    if (typeof define === 'function' && define.amd) {
      // AMD. Register as an anonymous module unless amdModuleId is set
      define(["jquery"], function (a0) {
        return (factory(a0));
      });
    } else if (typeof module === 'object' && module.exports) {
      // Node. Does not work with strict CommonJS, but
      // only CommonJS-like environments that support module.exports,
      // like Node.
      module.exports = factory(require("jquery"));
    } else {
      factory(root["jQuery"]);
    }
  }(this, function (jQuery) {
   (function ($) { // start of custom.js file.
    "use strict";
    $(document).ready(function () {
      // ...
    }
})(jQuery); // end of custom.js file.
}

custom.js 内部的一些东西我仍然有一些小问题，但至少它被正确加载了。

有关如何解决此问题的更好想法，请发布您的答案。哇！

【讨论】：

【解决方案3】：

你可以简单地在你的$ruby_app/app/javascript/packs/application.js中使用它来声明jQuery

window.jQuery = $;
window.$ = $;

【讨论】：