详解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.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
Javascript玩转继承(三)
May 08 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 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
php文件操作实例代码
2012/05/10 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
yii添删改查实例
2015/11/16 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
Javascript valueOf 使用方法
2008/12/28 Javascript
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
Vue实现简单分页器
2018/12/29 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
vue slot与传参实例代码讲解
2019/04/28 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
python和C语言混合编程实例
2014/06/04 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
白酒业务员岗位职责
2013/12/27 职场文书
出纳员的岗位职责
2014/02/22 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
关于Javascript闭包与应用的详解
2021/04/22 Javascript
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技