一般情况下,我们不用担心所使用的第三方库,在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,
首先,像下面这样修改
新闻热点
疑难解答
图片精选