没有在Rails应用程序中使用Webpack 2在.js.erb视图中定义$ [英] $ is not defined within a .js.erb view using Webpack 2 in Rails app

问题描述

我正在从资产管道迁移到Rails 4应用程序中的Webpack 2.除了在 .js.erb 视图中使用jQuery的JS代码外，一切似乎都可以正常工作.

I'm migrating from assets pipeline to Webpack 2 in a Rails 4 app. Everything seems to work fine, except for the JS code using jQuery within a .js.erb view.

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

The content of the webpack.config.js is as follows (omitted code for fingerprinting and compression):

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 库(及其他相关库)，

The jQuery library (and others related) is required within app/assets/javascripts/application.js as follows:

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

如您所见，我对 .erb 文件使用了 rails-erb-loader ，但是它无法正常运行.呈现 .js.erb 文件时，我总是在控制台中收到下一个错误:

As you can see, I've used the rails-erb-loader for .erb files but it doesn't work as I might have expected. When the .js.erb file is rendered, I always receive next error in console:

Uncaught ReferenceError: $ is not defined

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

The code within this file is nothing fancy, only includes some JS calling jQuery's $ function:

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

但是，在控制台中，我在打印$时就定义了$，即使在 .js.erb 开头使用 debugger :

However, within console the $ is defined when I print it, even using a debugger at the beginning of the .js.erb:

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

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

I've included all the possible combinations I've came up to define the jQuery in the plugins section of webpack.config.js:

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

我有没有考虑到任何配置?

Is there any configuration I have not taken into account?

任何帮助解决此问题的帮助.

Any help would be appreciated to resolve this problem.

更新

package.json 的内容如下:

The content of package.json is as follows:

{
  "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从页面中删除该错误的错误.

I've uploaded a sample app reproducing the error trying to remove a resource and then removing it from the page with jQuery.

示例应用

推荐答案

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

I recently had a similar error due to the fact that jQuery required in Webpack is not exposed in the view folder of my app, therefore not visible in my js.erb files. This was solved by exposing jQuery globally adding the following 2 lines in app/javascript/packs/application.js:

从'jquery'导入$;

import $ from 'jquery';

global.$ = jQuery;

global.$ = jQuery;

这篇关于没有在Rails应用程序中使用Webpack 2在.js.erb视图中定义$的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！