内容简介：...持续中=======================================================注意：开始之前以下内容之前，需要配置一些webpack的基础配置，传送门：
...持续中
=======================================================
第三方库的使用
注意：开始之前以下内容之前，需要配置一些webpack的基础配置，传送门： 学习webpack4.x - 基础配置
在项目中，经常会引用一些第三方模块， 比如jquery, lodash等，但是这些第三方模块怎么在webpack中配置呢？以jquery为例子：
首先先安装jquery：
yarn add jquery
方法一：直接引用
打开src/index.js文件，输入：
import $ from 'jquery'; console.log($);
尝试运行：npm run dev， 结果如下：
结果中会发现，已经引入完成了，在当前这个文件中可以随便使用jquery了。
但是这种方法是不能将jquery暴露到window全局的, 执行console.log(window.$)，结果是undefined，那么怎么暴露到window呢？如下：
方法二：暴露到window
将第三方库暴露在全局可以用expose-loader, 下面通过这个将jquery变成 $ 暴露到window:
step1：配置webpack.config.js文件：
// 模块配置
module.exports = {
module: {
//...
rules: [
//...
{
test: require.resolve('jquery'),
use: 'expose-loader?$' //把jquery变成 $ 暴露到window
}
]
}
}
step2: 安装expose-loader
yarn add expose-loader -D
尝试运行：npm run dev, 这时候发现console.log(window.$)有值了！
以上两种做法很麻烦，要import $ from 'jquery'这样引入jquery, 那么怎么样能在不同模块直接使用 $ 而不引入jquery呢 ？ 如下：
方法三：模块中注入
配置webpack.config.js文件：
let Webpack = require('webpack');
// 模块配置
module.exports = {
//...
//插件配置
plugins: [
//...
// 注入对象
new Webpack.ProvidePlugin({
'$': 'jquery' //把jquery变成 $ 注入到模块
})
]
}
只需要在webpack.config.js中这样配置下插件， 就可以直接在需要用到jquery的模块中使用$了， 而不用再通过import引入jquery，但是这种方法不能暴露到window中哦。
方法四：html中直接引入
这种方法是通过html的script标签，直接把第三方库引入进来，不需要yarn add去安装它，方法如下：
step1: 打开src/index.html文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>丸子</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div>我通过script引入了一个jquery</div> </body> </html>
step2: 打开src/index.js，引入jquery
import $ from 'jquery'; console.log($)
step3: 配置webpack.config.js文件
module.exports = {
//...
//外部引入的，不要打包
externals: {
jquery: "$"
}
//...
}
这种方法中webpack.config.js中的externals的配置是告诉webpack，这个模块是第三方模块，不要打包进去，这样可以避免因打包进去而文件过大，造成资源浪费。同样，这种方法也是可以暴露给window的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 使用 FLEX 调试任意第三方应用
- 使用策略模式优雅引用第三方框架
- 使用 RestTemplate 进行第三方Rest服务调用
- Java 实用第三方库：Lombok 使用入门
- Xcode 11 中使用 SPM 管理第三方库
- 使用cmake解决Android中对第三方库的依赖
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
HTML5与CSS3权威指南（上册） （第3版）
陆凌牛 / 机械工业出版社 / 2015-9-1 / CNY 89.00
本书是HTML 5与CSS 3领域公认的标杆之作，被读者誉为“系统学习HTML 5与CSS 3的最佳著作”和“Web前端工程师案头必备图书之_”。 前两版累计印刷超过15次，网络书店评论超过8000条，98％以上的评论都是五星级的好评。不仅是HTML 5与CSS 3图书领域当之无愧的领头羊，而且在整个原创计算机图书领域是佼佼者。 第3版首先从技术的角度根据最新的HTML 5和CSS 3......一起来看看 《HTML5与CSS3权威指南（上册） （第3版）》 这本书的介绍吧!
