专栏首页YuanXin十二:处理第三方JavaScript库

十二:处理第三方JavaScript库

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

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

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

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

0. 课程介绍和资料

本节课的代码目录如下:

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

{
    "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

// 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就会顺着这条链一直找下去。

// 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

<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。如下图所示,

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一:打包JS

    创建vendor文件夹,其中minus.js、multi.js和sum.js分别用 CommonJS、AMD 和 ES6 规范编写。

    心谭博客
  • 四:单页面解决方案--代码分割和懒加载

    其中,page.js是入口文件,subPageA.js和subPageB.js共同引用module.js。下面,我们按照代码引用的逻辑,从底向上展示代码:

    心谭博客
  • 九:CSS-Tree-Shaking

    是滴,随着 webpack 的兴起,css 也可以进行 Tree Shaking: 以去除项目代码中用不到的 CSS 样式,仅保留被使用的样式代码。

    心谭博客
  • 四:单页面解决方案--代码分割和懒加载

    其中,page.js是入口文件,subPageA.js和subPageB.js共同引用module.js。下面,我们按照代码引用的逻辑,从底向上展示代码:

    心谭博客
  • webpack使用优化(基本篇)

    前言 本文不是webpack入门文章,如果对webpack还不了解,请前往题叶的Webpack入门,或者阮老师的Webpack-Demos。 为什么要使用Web...

    李成熙heyli
  • Vue+ElementUI项目使用webpack输出MPA

    为另一个项目提供可嵌入的功能单页,大部分页面使用时都是独立功能页,个别页面带有左侧边栏(相当于3-4个页面的整合形态),由于资源定位地址的限定,每个页面打包为单...

    大史不说话
  • 什么!要用毛笔字效果!不会啊?也不能字体侵权!

    前言:学生们在学习ps软件的过程中非常的认真与努力,所以对于软件的使用可以说已经很熟练了,可是为什么当我们给学生安排一些原创设计需求的时候,学生却有种无从下手的...

    用户1730674
  • webpack实战——打包第一个应用

    作为前端开发者,我们以前在浏览器中运行 JavaScript ,会引用一些脚本来存放每个功能;此解决方案很难扩展,因为加载太多脚本会导致网络瓶颈;亦或使用一个包...

    流眸
  • 自从我会了Python中的PIL,发现了其实超级简单

    PIL全称是Python Image Library,顾名思义,是用来做图像处理的。

    润森
  • 大数据驱动下的媒体融合4.0时代

    近年来,中国媒体融合的发展速度惊人,从1.0时代,到今日的4.0时代,中国传媒业正经历着激烈的剧变。以大数据技术为支撑,以一体化平台为基础,以互联网产品思维实...

    腾讯研究院

扫码关注云+社区

领取腾讯云代金券