通过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语句中的CDATA标签的意义
May 09 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
vue解决使用$http获取数据时报错的问题
Oct 30 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
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
Python 除法小技巧
2008/09/06 Python
全面了解python字符串和字典
2016/07/07 Python
详解Python中类的定义与使用
2017/04/11 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
Python中的集合介绍
2019/01/28 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
大学社团计划书
2014/05/01 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
大学生毕业评语
2014/12/31 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL