webpack引入第三方库的方式及注意事项有哪些 - 行业资讯 - 肥雀云

　　介绍

这篇文章给大家分享的是有关webpack引入第三方库的方式及注意事项有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

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

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

然后,在使用jquery的模块文件中,通过进口$ & # 39;jquery # 39;或者var=美元需要(& # 39;jquery # 39;)来引入。

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

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

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

<强>项目的体积足够小(cdn)

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

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

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

& lt; !DOCTYPE html> 　　& lt; html lang=癳n"祝辞　　& lt; head> 　　& lt;元charset=癠TF-8"祝辞　　& lt; title>第三party 　　& lt;/head> 　　& lt; body> 　　https://www.yisu.com/zixun/& lt;脚本src=" https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js "> 　　身体　　

然后,在<代码>模块。js代码中使用jquery <代码> 即可,参考代码如下:

要求(& # 39;。/module.css& # 39;); 　　模块。出口=function () { 　　$ (document.body) .append (& # 39; & lt; h2>你好webpack & # 39;) 　　}

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

<强>全局环境下使用第三方库(provide-plugin或imports-loader)

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

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

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

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

纱添加lodash - dev

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

新webpack.ProvidePlugin ({ 　　_:& # 39;lodash& # 39; 　　}),

其次,在模块。js中添加如下代码:

… 　　var arr=[1, 2, 3, 4, 5, 6);//provide-plugin 　　美元(document.body) .append (& # 39; & lt; h2> & # 39;+ _。concat (arr & # 39; ~ & # 39;) + & # 39; & lt;/h2 # 39;); 　　…

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

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

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

… 　　新webpack.ProvidePlugin ({//_:& # 39;lodash& # 39; 　　_concat: [& # 39; lodash& # 39; & # 39; concat # 39;】　　}), 　　…

然后,修改模块。js,代码如下:

… 　　var arr=[1, 2, 3, 4, 5, 6);//provide-plugin//美元(document.body) .append (& # 39; & lt; h2> & # 39;+ _。concat (arr & # 39; ~ & # 39;) + & # 39; & lt;/h2 # 39;); 　　美元(document.body) .append (& # 39; & lt; h2> & # 39;+ _concat(加勒比海盗,& # 39;~ & # 39;)+ & # 39;& lt;/h2 # 39;); 　　…

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

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

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

纱添加imports-loader - dev

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

纱添加下划线

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

… 　　模块:{ 　　规则:[ 　　{ 　　测试:require.resolve(& # 39;强调# 39;), 　　用途:& # 39;imports-loader ? _=强调# 39; 　　}，　　… 　　] 　　}，　　…

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

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

新webpack.ProvidePlugin ({//_:& # 39;lodash& # 39;//_concat: [& # 39; lodash& # 39; & # 39; concat # 39;], 　　__:& # 39;lodash& # 39; 　　}),