webpack引入第三方库的方式,以及注意事项

2023-11-12

一般情况下,我们不用担心所使用的第三方库,在npm管理仓库中找不到。

如果需要某一个库,如:jquery,可以直接运行npm install jquery脚本命令来安装这个项目所需要的依赖;

然后,在使用jquery的模块文件中,通过import $ from 'jquery'或者var $ = require('jquery')来引入。

这是常用的在webpack构建的项目中引入第三方库的方式。

注:为了更好的演示示例代码,示例是在nodemon这篇文章的基础上操作的。

但是,在不同的场景下,对webpack构建的项目有不同的需求:

项目的体积足够小(cdn)

如果是webapck的处理方式,可参考webapck——实现构建输出最小这篇文章。

使用非webapck的处理方式,如:CDN。

操作也很简单,如果使用html-webpack-plugin直接在模板文件template/index.html中引入某个cdn(如:boot CDN)上的某个第三方库(如:jquery),参考代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>third party</title>
</head>
<body>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

然后,在module.js中使用jquery即可,参考代码如下:

require('./module.css');
module.exports = function() {
    $(document.body).append('<h1>hello webpack</h1>')   
}

最后,运行npm run test,构建结束后,你会在浏览器中看到hello webpack字样,背景是红色的页面效果。

全局环境下使用第三方库(provide-plugin or imports-loader)

为了避免每次使用第三方库,都需要用import或者require()引用它们,可以将它们定义为全局的变量。

而webpack的ProvidePlugin内置的插件,可以解决这个问题。详情可参考ProvidePlugin这篇文章的介绍。

避免于cdn引用的jquery冲突,这里使用lodash

首先,安装lodash依赖,命令如下:

yarn add lodash --dev

然后,在webpack.config.js中,添加如下代码:

new webpack.ProvidePlugin({
        _: 'lodash'
}),

其次,在module.js中添加如下代码:

...
var arr = [1, 2, 3, 4, 5 ,6];
// provide-plugin
$(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
...

最后,运行npm run test脚本命令,构建完成后,你就可以浏览器的页面中增加了1,2,3,4,5,6,~

如果,你想指定lodash的某个工具函数可以全局使用,如:_.concat

首先,像下面这样修改webapck.config.js,代码如下:

...
new webpack.ProvidePlugin({
        // _: 'lodash',
        _concat: ['lodash', 'concat']
}),
...

然后,修改module.js,代码如下:

...
var arr = [1, 2, 3, 4, 5 ,6];
// provide-plugin
// $(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
$(document.body).append('<h1>' + _concat(arr, '~') + '</h1');
...

如果不喜欢用插件的,也可以考虑使用import-loader,它也可以实现相同的目的。

为了避免不必要的干扰,可以使用underscore来演示。

首先,安装imports-loader依赖,命令如下:

yarn add imports-loader --dev

然后,安装underscore依赖,命令如下:

yarn add underscore

其次,在webapck.config.js中添加如下代码:

...
module: {
        rules: [
                {
                        test: require.resolve('underscore'),
                        use: 'imports-loader?_=underscore'
                },
                ...
        ]
},
...

注:underscorelodash都是用的是单例的模式开发的,它们实例化的构造函数的名字都是_,为了作区分,需要对其中一个做一下改变。imports-loader对这个标识起别名有点儿困难,而provide-plugin则没有这个问题,可以定一个个性化的别名。

修改webpack.config.js,代码如下:

new webpack.ProvidePlugin({
        // _: 'lodash',
        // _concat: ['lodash', 'concat'],
        __: 'lodash'
}),

可以为lodash定义为__underscore_作区分。

然后,修改module.js,代码如下:

...
// provide-plugin
// $(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
// $(document.body).append('<h1>' + _concat(arr, '~') + '</h1');
$(document.body).append('<h1>' + __.concat(arr, '~') + '</h1');
...

最后,保存所有的文件,可以下浏览器中看到相似的结果(保存后,nodemon自启动浏览器)。

cdn与externals

之前遇到了一些externals的问题,为什么要详细的说,是因为很多人不明白它到底用来干什么的。

场景再现:

之前,有一个项目使用了jquery,由于这个库的比较经典,它在应用的各个模块中被频繁引用。使用的方式如下:

import $ from 'jquery'

或者

var $ = require('jquery')

结果是构建结束后,文件比较大。那么考虑使用cdn,如上文描述的那样。这样需要删除importrequire的引用,同时删除安装的jquery依赖,但是由于项目结构比较乱,模块比较多,为了避免造成少改或者漏改的问题,会造成应用出错。该怎么办呢?

有的人说,不删除jquery依赖,那么使用cdn的目的就没有意义了。而使用external则可以解决这个问题。

可以在module.js文件中添加如下代码:

...
var $ = require('jquery')
...

然后,保存文件,发现构建输出提示如下的错误:

ERROR in ./module.js
Module not found: Error: Can't resolve 'jquery' in 'E:\workspace\me\webpack-play\demo\example-1'
 @ ./module.js 3:0-23
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./main.js

模块module.js中的jquery不能被解析。

紧接着,在webpack.config.js中添加如下代码:

 

externals: {
jquery: 'jQuery',
jquery: '$'
},

 

其中jquery代表的是require('jquery')中的jquery,而jQuery$代表的是jquery这个库自身提供的可是实例化的标识符。其它的库的cdn化,修改类似jquery

但是,如果在项目一开始就决定用cdn的话,就不要在使用jquery的模块中,使用var $ = require('jquery')import $ from 'jquery';,虽然这样做不会报错,但是如果出于某方面的考虑,后期可能会引入jquery依赖,那么就必须使用var $ = require('jquery')import $ from 'jquery';

参考源代码

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

webpack引入第三方库的方式,以及注意事项 的相关文章

随机推荐

  • 华为OD机试 - 最佳植树距离(Java)

    题目描述 按照环保公司要求 小明需要在沙化严重的地区进行植树防沙工作 初步目标是种植一条直线的树带 由于有些区域目前不适合种植树木 所以只能在一些可以种植的点来种植树木 在树苗有限的情况下 要达到最佳效果 就要尽量散开种植 不同树苗之间的最
  • 【Java script基础学习】本地对象 - Date

    Date 日期对象 用来操作计算机的日期和时间 获取 获取当前日期时间 获取当前的时间戳 Date now 时间戳 从1970 1 1 0 0 0 到此刻的毫秒数 获取完整的日期对象 new Date 获取到的是一个对象类型的日期 包含日期
  • STM32MP157驱动开发——Linux LCD驱动(上)

    STM32MP157驱动开发 Linux LCD驱动 上 0 前言 一 LCD 和 LTDC 简介 1 LCD 简介 1 分辨率 2 像素格式 3 LCD 屏幕接口 4 LCD 时间参数 5 RGB LCD 屏幕时序 6 像素时钟 7 显存
  • 【Python pygame】零基础也能轻松掌握的学习路线与参考资料

    Python pygame是一款专门用于开发游戏和多媒体应用程序的Python库 它可以帮助开发者实现丰富多彩的图形界面和实时动态交互效果 本篇文章将为大家介绍Python pygame的学习路线 包括入门基础 进阶知识以及优秀实践 帮助大
  • C++中return语句的用法

    C 中的return语句是函数中一个重要的语句 return语句用于结束当前正在执行的函数 并将控制权返回给调用此函数的函数 return语句有两种形式 return return expression 1 没有返回值的函数 不带返回值的r
  • 贪吃蛇(一)--用C++编写一个简单的贪吃蛇

    这里简单介绍怎么用C 编写一个简单的黑白框的贪吃蛇游戏 复杂的加了可视化界面程序点击这里贪吃蛇 二 easyX图形库进行可视化界面制作 首先分析在黑白框中的贪吃蛇需要哪些功能 1 需要能在界面指定位置 x y 直接输出对应内容 2 需要动态
  • 学习的逻辑: 知识经济学

    来自http liguanglei name blogs 2012 11 28 the logic of learning 1 怎么证明学会了 2 你的身价是由你表现出来的知识决定的 不是你掌握的知识决定的 万物有始皆有终 我们的逻辑链条起
  • GEO分析

    title R Notebook output html notebook 1 下载加载包 cran packages lt c tidyr tibble dplyr stringr ggplot2 ggpubr factoextra Fa
  • 汽车租赁毕业设计

    一个基于Java汽车租赁管理系统的毕业设计网站 系统分为用户和管理员2个角色 详细介绍请见下文 一 环境信息 运行环境 java8 mysql5 6 开发语言 java 开发框架 springboot springmvc mybatis t
  • 物联网云平台系统设计

    物联网云平台系统设计 下面将谈到几个关键问题 设备如何接入网络 设备间如何通信 物联网数据的用途 如何搭建起一个物联网系统框架呢 它的技术架构又是怎么样呢 物联网终端软件系统架构 物联网云平台系统架构 1 物联网设备如何接入到网络 只有设备
  • VScode 中文显示出现黄色方框的解决方法

    VScode 中文显示出现黄色方框的解决方法 使用 VScode 打开源码时 发现注释中的汉字都被一个黄色的方框圈住了 这是因为使能了批注中字符的突出显示的功能 不喜欢这个黄色方框的小伙伴 可以参照下列步骤 禁用批注中字符的突出显示 将鼠标
  • 【统计学习方法】感知机Python 对偶形式实现

    代码可在Github上下载 https github com FlameCharmander MachineLearning 前言 上篇博文感知机的原始形式提到了感知机的原始形式 而这篇博文介绍的是感知机的对偶形式 算法理论 感知机的原始形
  • 数据集成:数据挖掘的准备工作之一

    欢迎来到我的博客 作者 秋无之地 简介 CSDN爬虫 后端 大数据领域创作者 目前从事python爬虫 后端和大数据等相关工作 主要擅长领域有 爬虫 后端 大数据开发 数据分析等 欢迎小伙伴们点赞 收藏 留言 关注 关注必回关 上一篇文章已
  • 人工智能算法分类

    一 人工智能学习算法分类 人工智能算法大体上来说可以分类两类 基于统计的机器学习算法 Machine Learning 和深度学习算法 Deep Learning 总的来说 在sklearn中机器学习算法大概的分类如下 纯算法类 1 回归算
  • Android Studio 自动配置Gradle失败处理方法,Could not install Gradle distribution from “....zip

    转载 https blog csdn net BraveAnt666 article details 124736258 提示的错误一般是https services gradle org distributions gradle 7 3
  • python后端学习(十三)路由支持正则、Url编码、增删改操作、增加log日志

    路由支持正则 编码 增删改操作 增加log日志 mini frame py import re url编码相关 import urllib parse import logging from pymysql import connect U
  • OpenMV输出PWM,实现对舵机控制

    OpenMV的定时器官方函数介绍 Timer类 控制内部定时器 目录 OpenMV的PWM资源介绍 为什么要用OpenMV输出PWM OpenMV的PWM资源分配 资源 注意 建议 PWM输出代码 代码讲解 Timer Timer chan
  • Matlab的fspecial函数

    参考 http www ilovematlab cn thread 52886 1 1 html 函数原型 h fspecial type h fspecial type para 根据函数原型对fspecial函数作个说明 fspecia
  • QT笔记-窗体创建方式

    1 非模式窗体 窗体创建方式1 Modal属性决定了show 应该将弹出的dialog设置为模式状态还是非模式状态 默认情况下改属性为false并且show 弹出的窗口是非模式状态的 把这个属性设置为true就相当于QWidget wind
  • webpack引入第三方库的方式,以及注意事项

    一般情况下 我们不用担心所使用的第三方库 在npm管理仓库中找不到 如果需要某一个库 如 jquery 可以直接运行npm install jquery脚本命令来安装这个项目所需要的依赖 然后 在使用jquery的模块文件中 通过impor