5、webpack如何引入jquery——全局变量引入的问题

如何引入jquery？

1. 基本使用
   1. 先安装jq依赖包

       npm i jquery
   

   2. 在js文件中引入

   import $ from 'jquery'
   console.log($)//f 有内容
   console.log(window.$)//undefined
   

   问题：我们能够拿到$,但是因为模块化，$并不是挂载在window下的

引入第三方库的方法，并且注明哪些方法可以暴露给window

1. 方法一：使用暴露全局的loader：expose-loader，能暴露给window

   1. 使用内联loader的方法，能暴露给window

   import $ from 'expose-loader?$!jquery'
   //这句话的意思就是将jquery以$的形式暴露给window
   
   console.log($)//f 有内容
   console.log(window.$)//f 有内容
   

   2. 使用loader配置的方法，能暴露给window

   //在webpack.config.js
   rules:[
   	{
   		test:require.resolve('jquery'),//表示只要你引用了jquery，就能匹配到
   		use:'expose-loader?$'
   	}
   ]
   
   //然后在js中
   import $ from 'jquery'
   console.log($)//f 有内容
   console.log(window.$)//f 有内容
   

2. 方法二：使用webpack插件，这个方法只要在webpack配置一下，所有模块都可以使用了，但是不会暴露给window

   //在webpack.config.js中
   let Webpack = require('webpack');
   
   plugins:[
       new Webpack.ProvidePlugin({
           '$':'jquery'
       })
   ]
   
   //在任何js模块中,可以直接使用$，但是这个$不会暴露给window
   console.log($)//f 有内容
   console.log(window.$)//undefined
   

3. 方法三：使用CDN，能暴露给window

   1. 正常使用：，能暴露给window

   //header中插入：
   <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.js"></script>
   
   //然后直接可以使用
   console.log($)//f 有内容
   console.log(window.$)//f 有内容
   

   2. 不正常使用，与安装的jquery混淆使用：，能暴露给window

   //header中插入：
   <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.js"></script>
   
   //然后import混淆使用：
   import $ from 'jquery'
   console.log($)//f 有内容
   console.log(window.$)//f 有内容
   

   这样会导致在npm run build的时候，将jquery打包进去，但事实上我们用了CDN分发就无需打包进去了，这时候可以用如下配置解决：

   //在webpack.config.js中
   module.exports = {
       externals:{//无需打包的配置,代表这是外部引入的，无需打包
   		'jquery':'$'
   	},
   }
   

总结

我们有以下方法来使用第三方模块：

1. expose-loader 暴露到window上，能暴露给window
2. providePligin 给每个模块注入第三方库(比如$)，不能暴露给window
3. 引入不打包的方式，能暴露给window