尝试将 jquery 和 jquery-ujs 与 Browserify 一起使用，但得到 Uncaught ReferenceError: jQuery is not defined答案

【问题标题】：Trying to use jquery and jquery-ujs with Browserify but getting Uncaught ReferenceError: jQuery is not defined尝试将 jquery 和 jquery-ujs 与 Browserify 一起使用，但得到 Uncaught ReferenceError: jQuery is not defined
【发布时间】：2017-01-17 08:43:06
【问题描述】：

我正在开发一个 ruby on rails 项目并使用 Browserify 来管理 javascript 依赖项等。但是，当我运行应用程序时，我不断收到“未捕获的 ReferenceError：jQuery 未定义”，因为 jquery-ujs 尝试调用jQuery，但它不可用。我知道 jQuery 正在页面上加载，因为当我在没有 import 'jquery-ujs' 的情况下包含下面的代码时，我可以通过调用 $ 和 jQuery 来成功使用 jQuery。但是，我似乎也无法包含“jquery-ujs”。

import 'jquery';
import $ from 'jquery';
global.jQuery  = $;
import 'jquery-ujs'

这是我的 package.json 文件：

{
  "name": "frontend",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "watchify": "watchify -vd -p browserify-hmr -e frontend/application.js -o app/assets/javascripts/application.js",
    "build": "cross-env NODE_ENV=production browserify frontend/application.js | uglifyjs -c warnings=false -m > app/assets/javascripts/application.js"
  },
  "dependencies": {
    "jquery": "^2.2.4",
    "jquery-ujs": "^1.2.2",
    "vue": "^1.0.0",
    "vue-resource": "^0.7.0"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-runtime": "^6.0.0",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
    "browserify-hmr": "^0.3.1",
    "browserify-shim": "^3.8.12",
    "cross-env": "^1.0.6",
    "uglify-js": "^2.5.0",
    "vue-hot-reload-api": "^1.2.2",
    "vueify": "^8.0.0",
    "vueify-insert-css": "^1.0.0",
    "watchify": "^3.4.0"
  },
  "browserify": {
    "transform": [
      "vueify",
      "babelify",
      "browserify-shim"
    ]
  }
}

这是写在我的 application.js 文件中的，还有很多其他用 browserify 生成的东西：

var _jquery = require('jquery');
var _jquery2 = _interopRequireDefault(_jquery);
require('jquery-ujs');

【问题讨论】：

你能展示你的application.js吗
@luissimo application.js 文件是用 browserify 生成的，所以它非常长，超过 10,000 行，所以我认为在这里发布整个内容是不可行的。你有什么具体的要求吗？
是的，只是 require 部分 '//= 需要 jquery //= 需要 jquery_ujs' 等
@luissimo 添加了需要的部分，但是由于我使用的是 browserify 而不是 sprockets，所以它的格式与您编写的格式不同
哦，好吧，在您的 application.html.erb 中尝试在所有其他脚本之前包含 jquery 脚本。

标签： javascript jquery ruby-on-rails ecmascript-6 browserify

【解决方案1】：

我能够通过添加这些行来使其工作。我不确定为什么在这种情况下你必须使用 require 而不是 import ...

import $ from 'jquery';
global.jQuery = $
require('jquery-ujs')

【讨论】：