通过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 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 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
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
PHP 文件上传全攻略
2010/04/28 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Python实现二叉搜索树
2016/02/03 Python
Python常用库推荐
2016/12/04 Python
浅谈python中的占位符
2017/11/09 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
Python Selenium参数配置方法解析
2020/01/19 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
医学院护理专业应届生求职信
2013/11/12 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书