阿里云无线&前端团队是如何基于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
背景意义 云计算为如今的互联网时代提供了更多的计算能力,乃至创造能力,关系型数据库作为所有应用不可或缺的重要部件,开箱即用,高性价加比特性的云数据库深受开发者的喜爱.作为一线的开发和运维人员,在阿里云 ...
随机推荐
- .NET常用类库知识总结
常用类库之.NET中的字符串 字符串的特性 1.不可变性 由于字符串是不可变的的,每次修改字符串,都是创建了一个单独字符串副本(拷贝了一个字符串副本).之所以发生改变只是因为指向了一块新 ...
- C# 判断一字符串是否为合法数字(正则表达式)
判断一个字符串是否为合法整数(不限制长度) public static bool IsInteger(string s) { string pattern = @"^\d*$"; ...
- 记 移动端页面中莫名其妙的渲染BUG
问题描述: 在一个很简单的测试页面中 简单的两块布局,上下两块均没有单独设置字体大小,都用body继承的大小,即40px.我们现在给第一个块.fl 加上浮动 float:left; 另外一个块处于正 ...
- js日期格式化方法 dateFormatFn
var dateFormatFn=function(val,fmt){ var _this = new Date(val); console.log(_this,_this.getFullYear() ...
- 纯js拖拽参考
function myDrag(obj){ obj.onmousedown=function(e){ var e=e||window.event; var diffX=e.clientX-this.o ...
- struts2集成javamail发邮件(带附件)实践记录
一.代码预览 这两天在做struts2上的邮件发送.以前的项目有用到spring,用spring提供的邮件支持类很方便可以完成这个功能,但是现在只用struts2的话,就碰到了一系列的问题. 代码是从 ...
- Qt使用默认浏览器打开网页
#include <QDesktopServices> #include <QUrl> QDesktopServices::openUrl(QUrl("http:// ...
- UITableView去除空白cell上多余separator
具体的效果可以参考微信ios7版的UITableview 它最后一行cell的separator是顶到最左边的 首先设置tableFooterView _messageTableview.tableF ...
- IOS学习3
@property属性使用 copy:NSString strong: 一般对象 weak: UI空间 assign:基本数据类型 retain: (对象,先上述类型使用) id 万能指针. id缺点 ...
- Delphi 2010初体验,是时候抛弃Delphi 7了
Delphi 2010已于近日由Embarcadero公司发布.作者Kim Madsen作为一名资深的Delphi开发者,在他的博客中谈到了Delphi 2010的新性能.它的使用感受以及对Delph ...