通过webpack引入第三方库的方法


Posted in Javascript onJuly 20, 2018

一般来说,引入第三方库有一下三种情况:

  1. 通过CDN引入;
  2. 通过npm 安装并引入;
  3. 第三方js文件就在本地

通过CDN

这是最简单的一种方式,例如引入高德地图,可以直接把以下代码放在index.html文件底部,这种情况与webpack无关,因为webpack的入口文件并不在此处

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=您申请的key值"></script>

npm

通过npm install安装的包会放在node modules文件夹下,当使用时,可以直接在用到的文件顶部引入进来,例如import或者require。但如果每个模块化的文件都会用到,那么每个文件都要去引入这个第三方文件,很繁琐,这时候就可以用webpack的插件:ProvidePlugin,可以理解这个插件的作用就是把第三方库引入,且它的作用域是全局的。

例如引入jquery

new webpack.ProvidePlugin({
 $: 'jquery',
 jQuery: 'jquery'
})

那么就可以用$和jQuery了,它们两个都表示jquery,需注意的是$和jQuery后面的值(jquery)必须和npm install jquery中的jquery保持一致,不然会找不到。

本地JS库文件

会有这么一种情况:第三方的js文件就在本地,怎么通过webpack引入呢?比如第二种jquery的情况,

new webpack.ProvidePlugin({
 $: 'jquery',
 jQuery: 'jquery'
})

这样写肯定会找不到jquery了,因为它并不在node modules中,这时可以用webpack配置中的resolve选项,给jquery指定一个别名,并配置其路径。

假如我们的jquery.js文件放在dist文件夹下面

resolve:{
  alias: {
   $: path.resolve(__dirname, './dist/jquery.js'),
   jQuery: path.resolve(__dirname, './dist/jquery.js'),
  }
}

这样就可以了。

通过loader

除了ProvidePlugin这个插件,还有一个imports-loader可以完成引入第三方库的工作。

test来指定哪个文件需要引入第三方库,通过options配置jquery。然后打包后可以看出,打包后的app.js文件变大了。

module: {
    rules: [
      {
        test: path.resolve(__dirname, "./src/app.js"),
        use: "imports-loader"
        options:{
          $:'jquery'
        }
      }
    ]
  }

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

Javascript 相关文章推荐
javaScript 读取和设置文档元素的样式属性
Apr 14 Javascript
JavaScript 全角转半角部分
Oct 28 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
js性能优化技巧
Nov 29 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
javascript实现简单留言板案例
Feb 09 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 #Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 #Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 #Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 #Javascript
JS+H5 Canvas实现时钟效果
Jul 20 #Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 #Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 #Javascript
You might like
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
截获网站title标签之家内容的例子
2006/10/09 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
python实现识别相似图片小结
2016/02/22 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
后勤人员岗位职责
2013/12/17 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
教师节晚会主持词
2015/06/30 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书