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

Question

我正在从资产管道迁移到Rails 4应用程序中的Webpack 2。除了在.js.erb视图中使用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'
    })
  ]
}

在jQuery的库（和其他相关的）需要内应用程序/资产/ Java脚本/ application.js中，如下所示：

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

如您所见，我已经将rails-erb-loader用于.erb文件，但是它无法正常运行。当.js.erb文件被渲染，我总是收到在控制台下一个错误：

Uncaught ReferenceError: $ is not defined

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

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

但是，在控制台中，我在打印$时就定义了$，即使在.js.erb开头使用调试器也是如此：

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

我在webpack.config.js的plugins部分中包括了我用来定义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从页面中删除该错误的错误。

示例应用

Answer 1

我最近遇到了类似的错误，原因是Webpack中所需的jQuery未在view我的应用程序文件夹中公开，因此在我的js.erb 文件中不可见。这是通过公开jQuery来解决的，该方法在全局添加以下两行app/javascript/packs/application.js：

从'jquery'导入$;

global。$ = jQuery;

Answer 2

我认为使用expose-loader就足够了，正如我在上面链接的示例应用程序的拉取请求中建议的那样。

总结一下，

• 添加expose-loader
• 将 jQuery 公开给全局对象

module: {
  rules: [
    {
      test: require.resolve('jquery'),
      use: [{
        loader: 'expose-loader',
        options: '$'
      }]
    }
  ]
}