阿里云无线&前端团队是如何基于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
背景意义 云计算为如今的互联网时代提供了更多的计算能力,乃至创造能力,关系型数据库作为所有应用不可或缺的重要部件,开箱即用,高性价加比特性的云数据库深受开发者的喜爱.作为一线的开发和运维人员,在阿里云 ...
随机推荐
- ios球体弹跳游戏源码
一款耐玩的ios游戏源码,画面上有很多小星星,球体落下的时候,你需要在画面上画出一条条的线条让球体弹跳起来然后吃掉小星星,如果没借助球体就失败了.游戏有很多关卡.注意: <ignore_js_o ...
- 安装 android sdk 不能更新问题
1 要更改host 文件 2在Android SDK Manager的Tool->Option中按照如下修改
- js ajax乱码查看\u8fdb\u53e3
document.write('\u8fdb\u53e3') //在页面上看乱码转为中文 或在按F12 在console里查看 直接打'\u8fdb\u53e3'
- Oracle数据库中的Function调用参数问题
在工作中用到了Oracle数据库,需要调用Oracle的Function,Function返回的游标和结果都是通过参数来获取的 比如Function定义如下: , intype, ininttype) ...
- Pass Dynamic Value to a Grid Label
A grid label is the blue (normally) colored grid header that you see on PeopleSoft pages. The grid ...
- sqoop导入数据到hive
1.1hive-import参数 使用--hive-import就可以将数据导入到hive中,但是下面这个命令执行后会报错,报错信息如下: sqoop import --connect jdbc:my ...
- mariadb数据库备份学习笔记
备份类型: 完全备份 部分备份:仅备份其中的一张表或多张表 增量备份:仅备份从上次完全备份或增量备份之后变化的数据部分 热备份:在线备份,读写操作不受影响 温备份:在线备份,读操作可继续进行,但写操作 ...
- javascript变量和对象要注意的点
js对象和变量,对象本身是没有名称的,之所以使用变量是为了通过某个名称来称呼这样一种不具名称的对象.变量分基本变量和引用类型变量.将基本类型的的值付给变量的话,变量将这个值本身保存起来. <sc ...
- 用FileInputStream读文件,字节数组接收,不知道文件的大小时怎么办
FileInputStream in = new FileInputStream(文件路径File); byte[] buffer = new byte[in.available()]; in.rea ...
- Scala学习笔记1(安装)
到 官网下载scala tar包 http://www.scala-lang.org/download/ mac Finder里双击解压. 改名成scala 进命令行, mv ~/Downloads ...