背景

前端经历了初期的野蛮生长(切图,写简单的特效)——为了兼容浏览器兼容性而出现的各种类库(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实现前端工程化的的更多相关文章

  1. 技术解密 |阿里云多媒体 AI 团队拿下 CVPR2021 5 冠 1 亚成绩的技术分享

    6 月 19-25 日,备受全球瞩目的国际顶级视觉会议 CVPR2021(Computer Vision and Pattern Recognition,即国际机器视觉与模式识别)在线上举行,但依然人 ...

  2. 【转存】阿里云服务器下 LAMP 环境配置 —— 基于 CentOS 6.3

    阿里云服务器下 LAMP 环境配置 —— 基于 CentOS 6.3  Posted on 2016年2月10日 by  学院君 1.Apache 配置 —————————————————– vi / ...

  3. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  4. 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)

    1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...

  5. 基于webpack的前端工程化开发解决方案探索(二):代码分割与图片加载

    今天我们继续来进行webpack工程化开发的探索! 首先来验证上一篇文章   基于webpack的前端工程化开发解决方案探索(一):动态生成HTML  中的遗留问题:webpack将如何处理按需加载的 ...

  6. egret+git+阿里云code搭建团队开发

    准备: GIT客户端 廖雪峰老师GIT教程 GIT客户端安装完成后,打开Git Bash ,输入代码 ,设置git提交与获取的git账户信息 git config --global user.name ...

  7. 阿里云服务器下安装配置 vsftpd —— 基于CentOS 6.3 【简洁版】

    原文链接:http://www.tuicool.com/articles/nuiQBja 1.更新yum源 我是直接 yum update 更新的 2.安装vsftp 使用yum命令安装vsftpd ...

  8. 基于webpack的前端工程化开发解决方案探索(三):webpack-dev-server

    前两篇中我们使用webpack完成了静态资源(css/js/img)等自动写入HTML模板中,同时还可以为静态资源添加hash版本号,既满足了我们对于静态资源的打包要求,同时又无需开发人员介入打包过程 ...

  9. PolarDB · 新品介绍 · 深入了解阿里云新一代产品 PolarDB

    背景意义 云计算为如今的互联网时代提供了更多的计算能力,乃至创造能力,关系型数据库作为所有应用不可或缺的重要部件,开箱即用,高性价加比特性的云数据库深受开发者的喜爱.作为一线的开发和运维人员,在阿里云 ...

随机推荐

  1. .NET常用类库知识总结

    常用类库之.NET中的字符串 字符串的特性 1.不可变性        由于字符串是不可变的的,每次修改字符串,都是创建了一个单独字符串副本(拷贝了一个字符串副本).之所以发生改变只是因为指向了一块新 ...

  2. C# 判断一字符串是否为合法数字(正则表达式)

    判断一个字符串是否为合法整数(不限制长度) public static bool IsInteger(string s) { string pattern = @"^\d*$"; ...

  3. 记 移动端页面中莫名其妙的渲染BUG

    问题描述: 在一个很简单的测试页面中 简单的两块布局,上下两块均没有单独设置字体大小,都用body继承的大小,即40px.我们现在给第一个块.fl  加上浮动 float:left; 另外一个块处于正 ...

  4. js日期格式化方法 dateFormatFn

    var dateFormatFn=function(val,fmt){ var _this = new Date(val); console.log(_this,_this.getFullYear() ...

  5. 纯js拖拽参考

    function myDrag(obj){ obj.onmousedown=function(e){ var e=e||window.event; var diffX=e.clientX-this.o ...

  6. struts2集成javamail发邮件(带附件)实践记录

    一.代码预览 这两天在做struts2上的邮件发送.以前的项目有用到spring,用spring提供的邮件支持类很方便可以完成这个功能,但是现在只用struts2的话,就碰到了一系列的问题. 代码是从 ...

  7. Qt使用默认浏览器打开网页

    #include <QDesktopServices> #include <QUrl> QDesktopServices::openUrl(QUrl("http:// ...

  8. UITableView去除空白cell上多余separator

    具体的效果可以参考微信ios7版的UITableview 它最后一行cell的separator是顶到最左边的 首先设置tableFooterView _messageTableview.tableF ...

  9. IOS学习3

    @property属性使用 copy:NSString strong: 一般对象 weak: UI空间 assign:基本数据类型 retain: (对象,先上述类型使用) id 万能指针. id缺点 ...

  10. Delphi 2010初体验,是时候抛弃Delphi 7了

    Delphi 2010已于近日由Embarcadero公司发布.作者Kim Madsen作为一名资深的Delphi开发者,在他的博客中谈到了Delphi 2010的新性能.它的使用感受以及对Delph ...