时间戳

首页 > 解决方案 > Rails 6 Asset Pipeline：如何在 application.js 中导入供应商脚本？

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

问题描述

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

这是当前的架构：

javascript-文件夹架构

可以看到，我选择将供应商 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 应该可以被custom.js位于的文件访问app/javascript/plugins/custom.js，对吧？

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

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

但是当我运行服务器时，找不到 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;

我试图在 Ruby Guides 上的资产管道中找到答案。但似乎该教程有点过时了。

标签： jquerywebpackasset-pipelineruby-on-rails-6

解决方案

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

补充config/webpacker.yml：

additional_paths: ['your/path']

在这种特定情况下：

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

推荐阅读