做网站找王思奇/模板之家

如何引入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以$的形式暴露给windowconsole.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