详解webpack 如何集成第三方js库


Posted in Javascript onJune 29, 2017

webpack系列目录

基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com/ifengkou/webpack-template

正文

本篇主要介绍如何集成常用的js库,以avalon 和jquery 为例,同理可扩展到其他js库。更高级的功能见后续文章。更高级的功能见后续文章

avalon 是国内的一个轻量级 MVVM js框架,只是以此为例 并不仅限于它

集成avalon

由于项目用到了Avalon这个MVVM框架,webpack是兼容多种类型的加载器(AMD,CMD),平常用的avalon.js是自带加载器,用webpack打包时avalon,只能选用avalon的shim无加载器版本,而avalon 目前只有1.4有shim的版本,且不能通过npm install,所以只好到github 下载shim版本的avalon。其中avalon1.4 有3个version,可以根据项目需要下载相应的shim版本到项目中:

  1. avalon.js 支持IE6+ 和现代浏览器
  2. avalon.modern.js 合适于IE10+ 和HTML5 标准浏览器
  3. avalon.mobile.js 支持移动设备(增加了Touch Event,Pointer,Event,fastclick)

基础结构和准备工作

首先得安装上npm,再其次安装webpack

npm install webpack -g

新建项目,项目的目录结构说明

.
├── package.json  # 项目配置
├── src   # 源码目录
│ ├── pageA.html  # 入口文件a
│ ├── pageB.html  # 入口文件b
│ ├── css/   # css资源
│ ├── img/   # 图片资源
│ ├── js   # js&jsx资源
│ │ ├── pageA.js  # a页面入口
│ │ ├── pageB.js  # b页面入口
│ │ ├── lib/  # 没有存放在npm的第三方库或者下载存放到本地的基础库,如jQuery、Zepto、avalon
│ ├── pathmap.json  # 手动配置某些模块的路径,可以加快webpack的编译速度
├── webpack.config.js  # webpack配置入口

新建package.json文件,复制以下内容执行npm install

{
 "name": "webpack-template",
 "version": "1.0.0",
 "description": "webpack-template"
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "sloong",
 "license": "MIT",
 "devDependencies": {
 "css-loader": "^0.21.0",
 "file-loader": "^0.8.5",
 "style-loader": "^0.13.0",
 "url-loader": "^0.5.7",
 "webpack": "^1.13.1",
 "webpack-dev-server": "^1.14.1"
 }
}

集成Avalon

1.下载的avalon.shim.js 放到 src/js/lib 下(同理jquery,zepto)

2.在src目录下增加 pathmap.json,手动配置某些模块的路径,可以加快webpack的编译速度

{
"avalon": "js/lib/avalon.shim.js"
}

备注:其他依赖js模块同理,例如:avalon + jquery(或者zepto等等)

{
"jquery": "js/lib/jquery-1.12.4.js",
"avalon": "js/lib/avalon.shim.js"
}

3.配置webpack.config.js

var webpack = require("webpack");
var path = require("path");
var pathMap = require('./src/pathmap.json');
var srcDir = path.resolve(process.cwd(), 'src');
var nodeModPath = path.resolve(__dirname, './node_modules');
module.exports = {
entry: "./src/js/index.js",//入口js,可为数组
output: {
 path: path.join(__dirname, "dist"),
 filename: "bundle.js"
},
module: {
 loaders: [
 {test: /\.css$/, loader: 'style-loader!css-loader'}
 ]
},
resolve: {
 extensions: ['.js',"",".css"],
 root: [srcDir,nodeModPath],
 alias: pathMap,
 publicPath: '/'
}
}

4.新增index.html,引用了 dist/bundle.js(webpack 会解析入口文件index.js,将依赖项全部打包到bundle.js中)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test avalon</title>
</head>
<body>
<div ms-controller="avalonCtrl">
<h1>{{name}}</h1>
</div>
<script src="../dist/bundle.js"></script>
</body>
</html>

5.新增index.js。需要用哪个js库,就require('3rd-jslib')进来,webpack会将根据依赖项将所需的lib库打包到目标js文件中

var avalon = require('avalon');
avalon.define({
$id: "avalonCtrl",
name: "Hello Avalon!"
});
//jquery 测试
var $ = require("jquery")
$("<div>这是jquery生成的</div>").appendTo("body")

6.在项目路径下,执行webpack 打包指令

$ webpack

详解webpack 如何集成第三方js库

7.启动webpack-dev-server,访问http://localhost:8080/webpack-dev-server/src/index.html

$ webpack-dev-server

详解webpack 如何集成第三方js库

OK ,顺利集成

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

Javascript 相关文章推荐
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
浅谈javascript中的闭包
May 13 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
javascript实现拖放效果
Dec 16 Javascript
学习Angularjs分页指令
Jul 01 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 #Javascript
基于node.js制作简单爬虫教程
Jun 29 #Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 #Javascript
详解webpack自动生成html页面
Jun 29 #Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 #Javascript
详解webpack分包及异步加载套路
Jun 29 #Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 #Javascript
You might like
配置支持SSI
2006/11/25 PHP
PHP 程序员应该使用的10个组件
2009/10/31 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
python查看列的唯一值方法
2018/07/17 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
保护环境倡议书300字
2014/05/19 职场文书
护士求职信范文
2014/05/24 职场文书
生物科学专业自荐书
2014/06/20 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
事业单位聘任报告
2015/03/02 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
高中运动会广播稿
2015/08/19 职场文书
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python