十二：处理第三方JavaScript库

2020-04-20 16:32:44 浏览数 (1)

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

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

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

本文详细介绍了：在上面 3 种方法的基础上，如何配合webpack更优雅地引入和使用第三方js库。

0. 课程介绍和资料

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

本节课的代码目录如下：

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

代码语言：javascript复制
{
    "dependencies": {
        "jquery": "^3.3.1"
    },
    "devDependencies": {
        "webpack": "^4.16.1"
    }
}

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

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

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

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

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

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

2. 编写入口文件

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

为了尽可能模仿生产环境，app.js中使用了$来调用 jq，还使用了jQuery来调用 jq。

因为正式项目中，由于需要的依赖过多，挂载到window对象的库，很容易发生命名冲突问题。此时，就需要重命名库。例如：$就被换成了jQuery。

代码语言：javascript复制
// app.js
$("div").addClass("new");

jQuery("div").addClass("old");

// 运行webpack后
// 浏览器打开 index.html, 查看 div 标签的 class

3. 编写配置文件

webpack.ProvidePlugin参数是键值对形式，键就是我们项目中使用的变量名，值就是键所指向的库。

webpack.ProvidePlugin会先从npm安装的包中查找是否有符合的库。

如果webpack配置了resolve.alias选项（理解成“别名”），那么webpack.ProvidePlugin就会顺着这条链一直找下去。

代码语言：javascript复制
// webpack.config.js
const path = require("path");
const webpack = require("webpack");

module.exports = {
    entry: {
        app: "./src/app.js"
    },
    output: {
        publicPath: __dirname   "/dist/",
        path: path.resolve(__dirname, "dist"),
        filename: "[name].bundle.js",
        chunkFilename: "[name].chunk.js"
    },
    resolve: {
        alias: {
            jQuery$: path.resolve(__dirname, "src/vendor/jquery.min.js")
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery", // npm
            jQuery: "jQuery" // 本地Js文件
        })
    ]
};

4. 结果分析和验证

老规矩，根绝上面配置，先编写一下index.html：

代码语言：javascript复制
<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>Documenttitle>
    head>

    <body>
        <div>div>
        <script src="./dist/app.bundle.js">script>
    body>
html>

命令行运行webpack进行项目打包：

在 Chrome 中打开index.html。如下图所示，

标签已经被添加上了old和new两个样式类。证明在app.js中使用的$和jQuery都成功指向了jquery库。

jqueryui jquery

0 人点赞