Question

我正在尝试通过Webpack在Rails 6.0.0.rc1中安装jQuery，我不确定丢失了什么，但是尽管能够执行以下操作，但在浏览器控制台中却出现错误$ is not defined编译jQuery。

我用yarn add jquery添加了jQuery，所以我的package.json看起来像这样

{
  "name": "muladeseis_app",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.0.0",
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.2",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "jquery": "^3.4.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.3.1"
  }
}

我的app / javascript / packs / application.js需要从node_modules进行jQuery

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")

我尝试通过以下操作在config / webpack / environment.js中注册$：

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')

module.exports = environment

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

每当我在视图中添加带有$引用的脚本时，都会得到Uncaught ReferenceError: $ is not defined。

我已经检查了this之类的StackOverflow答案，以查看我是否在错误地注册了关键字符'$'，但是我只找到了建议使用ProvidePlugin的答案，而我已经在我的参考中提到过组态。

如果我在浏览器检查器中浏览我的应用程序源，我会看到集成在localhost：3000 >> packs / js中的jQuery代码，所以问题不是Webpack找不到jQuery，而是关键字“ $”和“ jQuery'无法识别。

感谢您的调试帮助。

Answer 1

我尝试了很多事情，有些在我的Docker容器中工作了，有些却没有，有些则没有了。最后，我决定将其放入app/javascript/packs/application.js：

global.$ = require('jquery')

您当然需要做yarn add jquery。

我确定有更好的方法，但这是唯一对我有用的方法，因此我将其放在此处，以防对其他人有帮助。

Answer 2

此解决方案适用于Rails 6.0.2.2和纱线1.16.0 https://stackoverflow.com/a/54906972/2970582

Answer 3

我什么都没了。

在app/javascript/packs/application.js中忘记声明：

window.jQuery = $;
window.$ = $;

因此可以选择jQuery关键字。

Answer 4

config/webpack/environment.js中的代码应如下所示：

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

另请参阅https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker

Answer 5

我正在尝试从4导轨升级到6导轨。经过几个小时的调试，终于我修复了这个jQuery加载错误。

这是我遵循的步骤：

添加jQuery

yarn add jquery

添加暴露加载器

yarn add expose-loader

更新config / webpack / environment.js文件

const { environment } = require('@rails/webpacker')

environment.loaders.append('jquery', {
    test: require.resolve('jquery'),
    use: [{
        loader: 'expose-loader',
        options: '$',
    }, {
        loader: 'expose-loader',
        options: 'jQuery',
    }],
});

module.exports = environment

更新app / javascript / packs / application.js文件

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("jquery");

重新启动webpack-dev-server

bin/webpack-dev-server

如果您更新environment.js文件，请始终重新启动webpack-dev-server。

如果您想使用旧版本的jQuery（例如：2.1.4版）

 yarn add jquery@2.1.4

通过Webpack在Rails中安装jQuery时未定义$

5 个答案: