webpack4 系列教程(十二)：处理第三方JavaScript库

专注前端与算法的系列干货分享，欢迎关注(¬‿¬)：
「微信公众号：心谭博客」| xin-tan.com | GitHub

0. 课程介绍和资料

• >>>本节课源码
• >>>所有课程源码

本节课的代码目录如下：

本节课的package.json内容如下：

{
   
  "dependencies": {
   
    "jquery": "^3.3.1"
  },
  "devDependencies": {
   
    "webpack": "^4.16.1"
  }
}

1. 如何使用和管理第三方JS库？

项目做大之后，开发者会更多专注在业务逻辑上，其他方面则尽力使用第三方JS库来实现。

由于js变化实在太快，所以出现了多种引入和管理第三方库的方法，常用的有 3 中：

1. CDN：<script></script>标签引入即可
2. npm 包管理： 目前最常用和最推荐的方法
3. 本地js文件：一些库由于历史原因，没有提供es6版本，需要手动下载，放入项目目录中，再手动引入。

针对第一种和第二种方法，各有优劣，有兴趣可以看这篇：《CDN 使用心得：加速双刃剑》

针对第三种方法，如果没有webpack，则需要手动引入import或者require来加载文件；但是，webpack提供了alias的配置，配合webpack.ProvidePlugin这款插件，可以跳过手动入，直接使用！

2. 编写入口文件

如项目目录图片所展示的，我们下载了jquery.min.js，放到了项目中。同时，我们也通过npm安装了jquery。