详解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 相关文章推荐
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 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
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
php自定义apk安装包实例
2014/10/20 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
python中的字典详细介绍
2014/09/18 Python
python简单猜数游戏实例
2015/07/09 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
Python开发的实用计算器完整实例
2017/05/10 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
python实现KNN分类算法
2019/10/16 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Python3 assert断言实现原理解析
2020/03/02 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
物业保安主管岗位职责
2013/12/25 职场文书
环保倡议书300字
2014/05/15 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
旅游活动总结
2014/08/27 职场文书
金融保险专业求职信
2014/09/03 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
团员自我评价范文
2015/03/10 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python