21

我正在尝试通过 Webpack 在 Rails 6.0.0.rc1 中安装 jQuery，但我不确定我缺少什么，但$ is not defined尽管能够编译 jQuery，但我在浏览器控制台中遇到了错误。

我已经添加了 jQuery yarn add 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.

我已经检查了这样的 StackOverflow 答案，看看我是否错误地注册了关键字符“$”，但我发现只有答案建议使用我在配置中已经提到的 ProvidePlugin。

此外，如果我在浏览器检查器中探索我的应用程序源，我确实看到 jQuery 代码集成在 localhost:3000 >> packs/js 中，所以问题不在于 Webpack 没有找到 jQuery，而是关键字“$”和“jQuery”是不被认可。

感谢您帮助调试它。

4

6 回答 6

38

我得到了缺少的东西。

忘app/javascript/packs/application.js了声明：

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

所以可以选择 jQuery 关键字。

于 2019-04-30T06:45:39.107 回答
10

中的代码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

于 2019-11-05T23:32:52.753 回答
5

我尝试了很多东西，有些有效，有些无效，有些在我的 Docker 容器中无效。最后我决定把它放进去app/javascript/packs/application.js：

global.$ = require('jquery')

你yarn add jquery当然需要这样做。

我确信有更好的方法，但这是唯一对我有用的方法，所以我把它放在这里以防它帮助其他人。

于 2020-04-27T20:51:21.877 回答
2

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

于 2020-03-25T09:23:31.617 回答
0

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

所以这是我遵循的步骤：

  1. 添加 jQuery
yarn add jquery
  1. 添加暴露加载器
yarn add expose-loader
  1. 更新 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
  1. 更新 app/javascript/packs/application.js 文件
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("jquery");
  1. 重启 webpack-dev-server
bin/webpack-dev-server

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

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

 yarn add jquery@2.1.4
于 2020-06-05T08:17:59.260 回答
0

正如我在https://github.com/rails/webpacker/commit/198a1580c7ec26a24ee81a09404fc173e725f032和https://github.com/rails/webpacker/issues/3116defe解释的那样：

  1. 使用expose-loader版本 3
  2. 更喜欢使用in公开 jQuery 的内联版本expose-loader（记录在https://webpack.js.org/loaders/expose-loader/#inline）。import $ from "expose-loader?exposes=$,jQuery!jquery"app/packs/entrypoints/application.js
  3. 你在哪里使用javascript_pack_tagadd defer: false。例如，它可能app/views/layouts/application.html.erb与：
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload',
      defer: false %>```
于 2021-09-09T20:03:24.263 回答