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


Posted in Javascript onJanuary 15, 2019

一般情况下,我们不用担心所使用的第三方库,在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'
        },
        ...
    ]
},
...

注:underscore和lodash都是用的是单例的模式开发的,它们实例化的构造函数的名字都是_,为了作区分,需要对其中一个做一下改变。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,如上文描述的那样。这样需要删除import或require的引用,同时删除安装的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';

参考源代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript dom 操作详解 js加强
Jul 13 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
javascript的理解及经典案例分析
May 20 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
JS高阶函数原理与用法实例分析
Jan 15 #Javascript
JS立即执行函数功能与用法分析
Jan 15 #Javascript
vue-cli 目录结构详细讲解总结
Jan 15 #Javascript
webpack file-loader和url-loader的区别
Jan 15 #Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 #jQuery
Element输入框带历史查询记录的实现示例
Jan 15 #Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 #Javascript
You might like
php的正则处理函数总结分析
2008/06/20 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
php链表用法实例分析
2015/07/09 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
javascript语言结构小记(一)
2011/09/10 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
Python 操作MySQL详解及实例
2017/04/30 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
使用Python的turtle模块画国旗
2019/09/24 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
高分子材料与工程专业个人求职信
2013/12/15 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
合作协议书怎么写
2014/04/18 职场文书
个人向公司借款协议书
2014/10/09 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
学校通报表扬范文
2015/05/04 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python