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

栏目: jQuery · 发布时间: 5年前

内容简介:一般情况下,我们不用担心所使用的第三方库,在npm管理仓库中找不到。如果需要某一个库,如:jquery,可以直接运行然后,在使用jquery的模块文件中,通过

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

参考源代码


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

复杂:信息时代的连接、机会与布局

复杂:信息时代的连接、机会与布局

罗家德 / 中信出版集团股份有限公司 / 2017-8-1 / 49.00 元

信息科技一方面创造了人们互联的需要,另一方面让人们在互联中抱团以寻找归属感,因此创造了大大小小各类群体的认同和圈子力量的兴起,即互联的同时又产生了聚群,甚至聚群间的相斥。要如何分析这张网?如何预测它的未来变化?如何在网中寻找机会,实现突围?本书提出了4个关键概念──关系、圈子、自组织与复杂系统: • 关系 关系是人与人的连接,又可以被分为强关系和弱关系。强关系就是和你拥有亲密关系的人,......一起来看看 《复杂:信息时代的连接、机会与布局》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

html转js在线工具
html转js在线工具

html转js在线工具