Webpack使jQuery在开发过程中全局可用

Question

我正在写一个反应应用程序，它将存在于已经包含jquery的网页中。这意味着我需要在开发期间对jQuery进行全局访问，但是不希望在构建时将其包含在bundle中（因为jquery已经存在于部署它的页面上）。

我很难将jquery作为全局（也可以通过$或window.jquery从任何地方访问）来工作。具体来说，我需要jQuery@1.7.2。这是我到目前为止所做的：

npm install jquery@1.7.2

然后，在webpack.dev.config.js中：

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
  })
]

...但是，当我运行我的开发服务器（webpack-dev-server）并尝试在模块中使用jQuery时，我得到：

error '$' is not defined

有什么想法吗？我的主要目标是：

1. 应该在开发构建期间存在，但不会捆绑用于生产

2. 应该可以通过窗口对象

从任何组件全局访问

3. 无需明确导入每个模块（假设它是全局的）

Answer 1

在花了一些时间之后，这是我的观察：

• 安装jquery@1.7.2会抛出以下警告： npm WARN deprecated jquery@1.7.2: Versions of the jquery npm package older than 1.9.0 are patched versions that don't work in web browsers. Please upgrade to >=1.11.0.。

• 尝试使用此版本的jquery构建我的软件包完全失败。我不知道你是怎么做到的，但对我来说却失败了。我正在使用webpack@1.13.3

• 我查看了使用jquery下载的npm install jquery@1.7.2的源代码。它绝对是从original source修改的。原始源代码仍然存在于jquery/tmp/jquery.js

下

<强>结论

最好的办法就是在其他代码之前的某个时刻执行此操作：

import 'jquery/tmp/jquery'。

这样文件将被执行，jquery将按照原先的意图注册到window，您可以在其余代码中使用$。