通过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 相关文章推荐
jquery select操作的日期联动实现代码
Dec 06 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
Vue全家桶入门基础教程
May 14 Vue.js
详解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
mysql时区问题
2008/03/26 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
python自动化测试实例解析
2014/09/28 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
详解Python中namedtuple的使用
2020/04/27 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
特步官方商城:Xtep
2017/03/21 全球购物
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
餐厅采购员岗位职责
2014/03/06 职场文书
党员干部承诺书范文
2014/03/25 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
实习科室评语
2015/01/04 职场文书
导游词开场白
2015/01/31 职场文书
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript