首页 > 语言 > JavaScript > 正文

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

2024-05-06 15:43:16
字体:
来源:转载
供稿:网友

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

首先,像下面这样修改

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选