本文的目的是拒绝全局引入jQuery！！拒绝脚本导入jQuery！！找到一种方案，只在当前js组件中引入jQuery，使用webpack进行裁剪打包！测试环境以下测试分别在webpack3.8.1、jQuery3.2.1、react16+中进行。如果你要我在react中全局引入jQuery，我很感动然后拒绝。但是有时候react的一些库可能不够强大，需要借助jQuery相关的插件来辅助完成。这些插件与jQuery形成依赖关系。最后，你和我一样，可能也需要在react中引入jQuery。这时候webpack就派上用场了。不要忘记百度。我在互联网上尝试了很多解决方案。说白了，大部分都是好玩的！比如很多博主说用下面的方案，还有一堆其他乱七八糟的辅助方案。newwebpack.ProvidePlugin({$:'jquery',jQuery:'jquery','window.jQuery':'jquery','window.$':'jquery',});第一次尝试，我以为成功了，因为可以打印$！但是，当我打印jQuery时，报错了！！jQuery未定义。然后，就是一个漫长的探索过程。我以为是CMD，我以为是AMD，我以为是ES6，连我都坚信是webpack的锅！！最后发现最后的答案是webpack的错。幸运的是，webpack提供了另一种支持方案。1.安装expose-loadernpminstall--saveexpose-loader2.将以下加载器代码添加到webpack.config{test:require.resolve('jquery'),use:[{loader:'expose-loader',options:'jQuery'},{loader:'expose-loader',options:'$'}]}3.接下来我应该做什么？不用担心，什么都不用做，然后轻松importjQueryimportReactfrom'react'require('jquery')require('jQuery第三方插件')classComponentsextendsReact.Component{constructor(props){super(props)}componentDidMount(){$(document).ready(function(){//做爱做事})}}4.这里可能还有一个小坑，坑很多jQuery第三方插件作者写的代码不规范，遇到过一些没有声明变量的情况。在那些老程序员眼里，js变量没有声明就代表全局变量，但是在webpack眼里，你不声明就是undefined！如果你得到jQuery插件未定义的错误，通常只需将var添加到此变量即可！5.最后，自己写的组件都集成了异步封装功能，所以现在包含jQuery的react组件不会污染其他react组件，不会导致其他组件体积增大，不会造成体积publicjs来改，前提是你也实现了react组件的异步加载功能。6、webpack异步打包组件的解决方法，请看我的其他文章！只要你使用webpack，这个方案同样适用于react和vue开发者
