通过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中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
详解React-Todos入门例子
Nov 08 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
javascript实现数字时钟效果
Feb 06 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
第八节 访问方式 [8]
2006/10/09 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
javascript实现拖放效果
2015/12/16 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
python 伯努利分布详解
2020/02/25 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
会计电算化专业毕业生自荐信
2013/12/20 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
展览会邀请函
2015/02/02 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
Python PIL按比例裁剪图片
2022/05/11 Python