Rails/Webpack:如何确保导入的组件可以看到jquery？

Question

我正在尝试将Bootstrap主题合并到我的应用程序中。

我已经将所需的组件添加到我的web包中：

import Rails from 'rails-ujs';
window.Rails = Rails;
Rails.start();

import Turbolinks from 'turbolinks';
Turbolinks.start();

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

// Front Bootstrap template
import "../vendor/front-v2.8.0/assets/scss/theme.scss"
// Front JS Global Compulsory
import "../vendor/front-v2.8.0/assets/vendor/jquery-migrate/dist/jquery-migrate.min.js"
import "../vendor/front-v2.8.0/assets/vendor/popper.js/dist/umd/popper.min.js"
import "../vendor/front-v2.8.0/assets/vendor/bootstrap/bootstrap.min.js"
// JS Front
import "../vendor/front-v2.8.0/assets/js/hs.core.js"
import "../vendor/front-v2.8.0/assets/js/components/hs.header.js"

然而，当我加载页面时，我在JS控制台中得到一个错误：

ReferenceError: Can't find variable: jQuery  jquery-migrate.min.js

所以我看到，尽管已经导入了关于jquery-migrate的jQuery，但jquery-migrate并不知道它。我假设我没有正确地导入我的资产。有没有一种方法可以让jquery对jquery-migrate可用，而无需实际更改jquery-migrate的代码？

Answer 1

对于jQuery，您必须使其在$和jQuery中可用。打开config/webpack/environment.js文件，并在module.exports = environment的正上方添加以下行。

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
}))

来源：https://medium.com/michelada-io/from-the-asset-pipeline-to-webpack-ce5a4bc323a9