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

Question

我正在尝试在 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', () => {
});

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

为了清楚起见，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;

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

Answer 1

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

为此，我将 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 中的一些东西仍然有一些小问题，但至少它正在正确加载。

关于如何解决这个问题的更好的想法请post你的回答。赛亚！

Answer 2

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

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

Answer 3

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

在config/webpacker.yml中添加：

additional_paths: ['your/path']

在这种特定情况下：

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

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

Rails 6 Asset Pipeline: How to import vendor scripts in application.js?

jquery

asset-pipeline

webpack

ruby-on-rails-6