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

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

我很难让jQuery作为一个全球（也可以从任何地方通过$或window.jquery）访问工作。具体而言，我需要[email protected]。以下是我迄今所做的：

npm install [email protected]

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

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

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

error '$' is not defined

任何想法？我的主要目标是：

应该是开发版本中出现，但不捆绑生产
应该是通过窗口对象从任何组件全局访问
没有明确地导入到每个模块（假设它是一个全球性的）

来源

2016-11-05 Prefix

你确定你在dev模式下使用'webpack.dev.config.js'吗？ –

@MitchKarajohn我。我想知道是否由于我使用的jQuery版本？（1.7.2反对2.x或3.x）。尽管这个版本是req。 – Prefix

嗯，显然[该版本]（http://code.jquery.com/jquery-1.7.2.js）暴露'jQuery'对象的默认窗口（'/ *公开jQuery的全局对象*/window.jQuery = window。$ = jQuery;'）。也许你根本不需要使用'ProvidePlugin'，只要确保在代码的其余部分之前加载库。试试这个和发布结果 –

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

安装[email protected]，抛出以下警告： npm WARN deprecated [email protected]: 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构建捆绑包完全失败。我不知道你是怎么做到的，但对我来说却失败了。我正在使用[email protected]
我检查了jquery与npm install [email protected]下载的源代码。它绝对是从original source修改而来的。原始源代码仍然存在，虽然下jquery/tmp/jquery.js

结论

这个你最好的赌注工作是你的代码的其余部分之前，这样一来，在一些点：

import 'jquery/tmp/jquery' 。

这样的文件会被执行，jquery将被注册到window，因为本来想，你可以在你的代码的其余部分使用$。

来源

2016-11-05 22:37:18

非常感谢。这为我做了诡计。谢谢你的帮助！ – Prefix

@Prefix很高兴我设法帮助你。 –

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

回答

相关问题