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

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

每当我在 View 中添加带有 $ 引用的脚本时，我都会收到 Uncaught ReferenceError: $ is not Defined。

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

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

非常感谢您帮助调试此问题。

Answer 1

我已经找到了缺少的东西。

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

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

因此可以选择 jQuery 关键字。