jquery - $ 未在 Rails 应用程序中使用 Webpack 2 的 .js.erb View 中定义

Question

我正在 Rails 4 应用程序中从 Assets 管道迁移到 Webpack 2。一切似乎都工作正常，除了 .js.erb View 中使用 jQuery 的 JS 代码。

webpack.config.js的内容如下(省略了指纹识别和压缩的代码):

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const jsOutputTemplate = 'javascripts/[name].js'
const cssOutputTemplate = 'stylesheets/[name].css'

module.exports = {
  context: path.join(__dirname, '/app/assets'),
  entry: {
    application: ['./javascripts/application.js', './stylesheets/application.scss']
  },
  output: {
    path: path.join(__dirname, '/public'),
    filename: jsOutputTemplate
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract(['css-loader', 'resolve-url-loader'])
      },
      {
        test: /\.s(a|c)ss$/,
        use: ExtractTextPlugin.extract(['css-loader', 'resolve-url-loader', 'sass-loader?sourceMap'])
      },
      {
        test: /\.(woff2?|svg)$/,
        use: 'url-loader?limit=10000&name=/fonts/[name].[ext]'
      },
      {
        test: /\.(ttf|eot)$/,
        use: 'file-loader?name=/fonts/[name].[ext]'
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: 'url-loader?limit=10000&name=/images/[name].[ext]'
      },
      {
        test: /\.erb$/,
        enforce: 'pre',
        use: 'rails-erb-loader'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: cssOutputTemplate,
      allChunks: true
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      '$': 'jquery',
      'window.$': 'jquery',
      jQuery: 'jquery',
      'jQuery': 'jquery',
      'window.jQuery': 'jquery',
      jquery: 'jquery',
      'jquery': 'jquery',
      'window.jquery': 'jquery'
    })
  ]
}

app/assets/javascripts/application.js 中需要 jQuery 库(以及其他相关库)，如下所示:

require('jquery');
require('jquery-ui');
require('jquery-ujs');
require('jquery-datepicker');

如您所见，我对 .erb 文件使用了 rails-erb-loader，但它并没有像我预期的那样工作。当渲染 .js.erb 文件时，我总是在控制台中收到下一个错误:

Uncaught ReferenceError: $ is not defined

这个文件中的代码没什么花哨的，只包含一些调用 jQuery 的 $ 函数的 JS:

let $messagesArea = $('#js-attachments-messages');

但是，在控制台中，$ 是在我打印时定义的，即使在 .js.erb 开头使用调试器:

function $(selector, [startNode]) { [Command Line API] } 

我已经在 webpack.config.js 的插件部分中包含了定义 jQuery 的所有可能组合:

new webpack.ProvidePlugin({
  $: 'jquery',
  '$': 'jquery',
  'window.$': 'jquery',
  jQuery: 'jquery',
  'jQuery': 'jquery',
  'window.jQuery': 'jquery',
  jquery: 'jquery',
  'jquery': 'jquery',
  'window.jquery': 'jquery'
})

是否有任何配置我没有考虑到？

任何解决此问题的帮助都将不胜感激。

更新

package.json内容如下:

{
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "compression-webpack-plugin": "^0.4.0",
    "css-loader": "^0.28.0",
    "expose-loader": "^0.7.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "imports-loader": "^0.7.1",
    "node-sass": "^4.5.2",
    "rails-erb-loader": "^5.0.0",
    "resolve-url-loader": "^2.0.2",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.4"
  },
  "dependencies": {
    // ...
    "jquery": "^3.2.1",
    "jquery-datepicker": "^1.11.5",
    "jquery-ui": "^1.12.1",
    "jquery-ujs": "^1.2.2",
    // ...
  }
}

更新2

我上传了一个示例应用程序，它重现了尝试删除资源的错误，然后使用 jQuery 将其从页面中删除。

Sample app

Answer 1

我最近遇到了类似的错误，因为 Webpack 中所需的 jQuery 未在我的应用程序的 view 文件夹中公开，因此在我的 js.erb 文件。 通过在 app/javascript/packs/application.js 中全局公开 jQuery 添加以下两行来解决此问题:

import $ from 'jquery';

global.$ = jQuery;