阿里云无线&前端团队是如何基于webpack实现前端工程化的
背景
前端经历了初期的野蛮生长(切图,写简单的特效)——为了兼容浏览器兼容性而出现的各种类库(JQUERY,YUI等——mv*(饱暖思淫欲,代码多了,也就想到怎样组织代码结构,backbone,angularjs等)——工程化(利用grunt,gulp,yeoman做项目脚手架以及打包部署),然而这些东西配置起来需要一定的门槛,并且需要跟业务耦合。全端化、全栈化以及工程化的大环境下,我们希望有这样一套工具可以尽量多的支持业务场景,尽量少的配置,尽量简单的使用命令。而DBL就是这样一个前端自动化工具,主要功能:项目脚手架,本地server(支持wacth,修改立即生效),本地可视化mock数据并会自动化生成接口文档,deploy项目。下面会详细介绍该工具的使用。
安装dbl工具
sudo npm install dbl -g
dbl -V
项目脚手架
mkdir demo && cd demo
dbl init
运行命令后,dbl会为我们初始化项目结构:
|-demo
|-- src
|-- index.html
|-- css
|-- js
|-- make-webpack.config.js
|-- package.json
|-- aliasMap.json
...
如何使用及工具优势
我们的项目脚手架依赖webpack(如果对此不熟悉的可以自行谷歌),优势在于:
- 比起grunt,gulp,在配置上要简单很多。另外,grunt,gulp只是作为打包工具,如果要做模块化开发,还必须引入requirejs或者seajs。而用了dbl,你完全不用考虑那些麻烦的配置问题,一切都帮你配置好了,你可以像写node一样写js了。
- 模块化开发,一个完整模块应该包含html,css,js。在传统工具中,我们很难维护模块css和js保持同步。而dbl,可以用做到在开发过程中直接这样使用:
/**这是文件 component/list.js**/
require('component/list.less')
工具会自动把less编译成css,并且在html页面上生成style标签,并把css插入进去。细心的你可能会说,html应该对于style标签有个数限制,太多无法支持。而且如果上线时采用这种方式不能很好的利用cdn缓存——不过,不用担心,deploy的时候,我们会把这些style提取出来,根据页面级别合并成一个css文件。
- 资源尽量利用浏览器缓存。利用angularjs + requirejs,如果有多个vm页面,公用的资源我们习惯用grunt-requirejs根据页面打包在一起。这样做,就忽视了浏览器缓存对于性能的影响。而dbl,如果有两个页面共同引用了一个模块,这个模块将会被打包到common.js。
- 支持less,sass(这个考虑到很多用户安装时会出问题,如果需要自己在 make-webpack.config.js配置里加上即可)。这种可配置的方式极大的考虑了扩展。
- 本地server。修改自动生效,而且几乎是瞬时的。
- 本地mock数据。mock数据是通过启用另外一个node服务作为数据提供方。 ~~~js dbl server -p 3001 ~~~ 此命令运行后,mock服务自动启动。默认端口是8001——注意server和mock是两个独立服务。mock服务可以可视化编辑接口,会自动生成接口文档,方便前后端合作。而且只要项目在,理论上这个文档一定是最新的。比记录在doc文档系统方便多了。你可以通过:http://localhost:8001 访问,界面长这样:
- dbl deploy 命令会把资源进行打包压缩,并且在当前目录下生成build文件夹。到这里,你就可以愉快的把此目录上传到cdn上了。
项目地址:https://github.com/cc17/dbl
交流请加qq:375856344
阿里云无线&前端团队是如何基于webpack实现前端工程化的的更多相关文章
- 技术解密 |阿里云多媒体 AI 团队拿下 CVPR2021 5 冠 1 亚成绩的技术分享
6 月 19-25 日,备受全球瞩目的国际顶级视觉会议 CVPR2021(Computer Vision and Pattern Recognition,即国际机器视觉与模式识别)在线上举行,但依然人 ...
- 【转存】阿里云服务器下 LAMP 环境配置 —— 基于 CentOS 6.3
阿里云服务器下 LAMP 环境配置 —— 基于 CentOS 6.3 Posted on 2016年2月10日 by 学院君 1.Apache 配置 —————————————————– vi / ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)
1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...
- 基于webpack的前端工程化开发解决方案探索(二):代码分割与图片加载
今天我们继续来进行webpack工程化开发的探索! 首先来验证上一篇文章 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML 中的遗留问题:webpack将如何处理按需加载的 ...
- egret+git+阿里云code搭建团队开发
准备: GIT客户端 廖雪峰老师GIT教程 GIT客户端安装完成后,打开Git Bash ,输入代码 ,设置git提交与获取的git账户信息 git config --global user.name ...
- 阿里云服务器下安装配置 vsftpd —— 基于CentOS 6.3 【简洁版】
原文链接:http://www.tuicool.com/articles/nuiQBja 1.更新yum源 我是直接 yum update 更新的 2.安装vsftp 使用yum命令安装vsftpd ...
- 基于webpack的前端工程化开发解决方案探索(三):webpack-dev-server
前两篇中我们使用webpack完成了静态资源(css/js/img)等自动写入HTML模板中,同时还可以为静态资源添加hash版本号,既满足了我们对于静态资源的打包要求,同时又无需开发人员介入打包过程 ...
- PolarDB · 新品介绍 · 深入了解阿里云新一代产品 PolarDB
背景意义 云计算为如今的互联网时代提供了更多的计算能力,乃至创造能力,关系型数据库作为所有应用不可或缺的重要部件,开箱即用,高性价加比特性的云数据库深受开发者的喜爱.作为一线的开发和运维人员,在阿里云 ...
随机推荐
- ASP.NET相关技术整理
- EasyUI datagrid checkbox数据设定与取值(转自http://blog.csdn.net/baronyang/article/dnetails/9323463,感谢分享,谢谢)
这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数据列的 Checkbox 设定为 Che ...
- FileUpload无法赋值解决方案
FileUpload无法赋值解决方案 编写人:CC阿爸 2015-1-27 今天在这里,我想与大家一起分享如何处理fileupload控件不能赋值的问题.有兴趣的同学,可以一同探讨与学习一下,否则就略 ...
- compareTo & toString
public class UnAssignedRecord implements Comparable<UnAssignedRecord> { private String time; / ...
- CentOS下安装LNMP(LINUX+NGINX+MYSQL+PHP)环境
一.安装Nginx最新版 首先查看是否有安装源包 yum list nginx (或yum info nginx) 如果没有则 vi /etc/yum.repos.d/nginx.repo #添加如 ...
- php中关于抽象(abstract)类和抽象方法的问题解析
在面向对象(OOP)语言中,一个类可以有一个或多个子类,而每个类都有至少一个公有方法作为外部代码访问的接口.而抽象方法就是为了方便继承而引入的,现在来看一下抽象类和抽象方法分别是如何定义以及他们的特点 ...
- php教程一,变量
php是一种动态脚本语言,比较适合web开发. php支持8种变量数据类型: 四种标量类型: boolean(布尔型) integer(整型) float(浮点型,也称作 double) string ...
- php excel (转)
首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.php和 PHPExcel的文件夹,这个类文件和文件夹是我们需要的,把clas ...
- Delphi中TStringList类常用属性方法详解
TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. 常规的用法大家都知道,现在来讨论它的一些高级的用法. 先把要讨论的几个属性列出来: 1.CommaText 2.Delim ...
- Java4Android
变量 在计算机中存储信息需要声明变量的位置和所需的内存空间 boolean true false char ASCII字符集 计算机中所有数据都使用二进制表示 例如:a,b,c 适用七位二进制数进行表 ...