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

Question

我试图通过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”是无法识别。

非常感谢您的调试帮助。

Answer 1

我有什么缺少的。

在app/javascript/packs/application.js忘记声明的情况下：

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

因此可以选择jQuery关键字。

Answer 2

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

我尝试了很多东西，有些有效，有些无效，有些在我的 Docker 容器中不起作用。最后我决定将其放入app/javascript/packs/application.js：

global.$ = require('jquery')

yarn add jquery你当然需要做。

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