在Rails应用程序中使用Webpack 2在.js.erb视图中未定义$

Question

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'
    })
  ]
}

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

正如您所看到的，我已经将rails-erb-loader用于.erb文件，但它并不像我预期的那样工作。当.js.erb文件呈现时，我总是在控制台中收到下一个错误：

Uncaught ReferenceError: $ is not defined

这个文件中的代码并不是什么花哨的东西，只是包含了一些调用jQuery的$函数的JS：

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

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

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

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",
    // ...
  }
}

Answer 1

我最近遇到了一个类似的错误，原因是Webpack中所需的jQuery没有在我应用程序的视图文件夹中公开，因此在我的js.erb文件中不可见。通过全局公开jQuery，在app/javascript/packs/application.js中添加以下2行，解决了这个问题：

从“jQuery”导入$；

global.$=jQuery；