前端架构之路（5） - 构建工具 for teamwork

构建工具 for teamwork

1. 为什么需要 “构建工具 for teamwork”

现在对于构建工具的使用已经非常广泛了，从 grunt 到 gulp，再到 webpack，一个个更加强大工具在不断出现，前端的技术更新节奏之快真的有点让人应接不暇呢（^_-）。但这些构建工具也只是提供了一些基础子集，对于团队来说，还需要把这些子集进行组合，打造适合团队开发的构建工具。

2. 适合团队的构建工具应当具有的一些特性

这里只涉及团队开发的特性，不涉及前端构建的基本特性，如：合并压缩代码，去缓存，提取公共文件等。

• 有良好的项目结构（目录结构，文件结构，模块化分组结构，组件化结构），并对其具有一定的约束力；
• 页面之间、组件之间应该是相互隔离、解耦的，更新其中的一个页面（或组件）不会影响到其他的页面（或组件）；
• 对多页面和单页面应用都有完备的支持；
• 对扩展语言的支持（可选）：TypeScript、coffeescript、less、sass、ejs、jade；
• 对框架的支持（可选）：react、vue、angular；
• 自动化构建，以尽量少的命令做尽量多的事情（一条命令搞定所有事情当然是做好的啦，嘻嘻）；
• 扩展性好，能够很方便的扩展工具的功能；
• 可配置性好，可以通过配置来启用或禁用一些功能；
• 支持多个页面一起构建，支持多服务器环境，支持 web、static 分离，支持适配任何后端语言，支持命令行配置，支持个人本地化配置（每个人自己独有的配置），支持页面本地化配置（每个页面独有的配置）；
• 文件构建记录，每次只上传服务器不存在的文件；
• 能够快速创建新项目，并能方便的在多个项目之间共享组件；
• ...

3. lila 构建工具

lila 底层使用 webpack 打包代码，使用 gulp 对打包好的代码进行额外的数据流操作，如文件变动记录，上传代码到服务器等，当然完全支持上面所列的诸多特性。

3.1 目录结构

lila 对文件结构有很清晰的定义，包括目录结构、文件结构、模块化分组结构、组件化结构，并且页面之间、组件之间是相互隔离、解耦的。

多页面构建，无论你是否使用单页面应用（SPA），或者任何框架。

|-- project/ 工程目录
    |-- src/ 源代码目录
        |-- component/ 全局组件目录
        |-- util/ 全局工具函数目录
        |-- ...
        |-- category1/ 类别 1 目录
            |-- page1/ 页面 1 目录（即这个页面的工作空间，这个页面的所有资源都将在这个目录下）
                |-- index.html html 入口文件
                |-- index.js js 入口文件
                |-- index.(css|less|scss) 样式入口文件
                |-- js/ js 文件目录
                    |-- ajax/ 对 ajax 封装的目录
                    |-- util/ 工具类函数的目录
                    |-- pages/ spa 应用页面目录
                    |-- data/ 静态数据目录
                    |-- tpl/ 模板目录
                    |-- (event|view)/ 事件监听文件目录
                    |-- ...
                |-- data/ 本地 json 数据模拟
                |-- (css|less|scss)/ 样式文件目录
                |-- images/ 图片文件目录
                |-- components/ 组件目录（如果基于 react, vue 等组件化框架）
                |-- ...

3.2 命令

lila 的哲学是一个命令做完所有事情，所以现在命令不是很多，但基本上都能物尽其用。

3.2.1 dev

开发一个模块（页面、组件），通过开启一个本地服务器，加上热更新和热替换，实现一个模块的快速开发。

3.2.1.1 实现库

• browser-sync
• webpack-dev-middleware
• webpack-hot-middleware

3.2.1.2 用法

lila dev moduleName

3.2.2 dist

对指定模块进行构建。可以同时对多个模块进行构建，也可指定要构建的环境（服务器环境，本地环境）。

3.2.2.1 中间会做些什么

通过 webpack 构建，确定是否需要单独打包 css 文件，是否需要分割 js 为多个文件，是否动态加载一些 js，是否需要压缩代码，是否需要记录本次构建文件变动，根据配置确定 html、css 对其他的资源应用路径的正确（尤其是分布式服务器的时候）等。

3.2.2.2 用法

lila dist moduleName [-e 0|1|2] [-l localName]

• e|env：指定服务器环境
• l|local：指定本地个人环境

3.2.2.3 同时构建多个模块

通过指定 moduleName 确定需要构建的模块。

• test/index：一个模块
• test/index,test/index2：多个模块
• test/*：通配符，表示 test 目录下所有存在的模块
• test/index,test2/*：多种模式
• *|all：表示所有模块

3.2.3 sync

先执行构建任务，然后把构建好的同步到服务器，支持文件变动记录（只上传服务器不存在的文件）和分布式服务器。

lila sync moduleName [-e 0|1|2] [-l localName]

3.2.3 analyze|ana

查看每个文件模块的大小，确定哪些比较大的文件需要单独分割出来加载，以提高加载速度。

3.3 配置

项目的配置在项目根目录下的 lila.config.js 中，每个模块的自定义配置在模块工作空间下的 config.js 文件中。

• minJs, minCss, minHtml：代码压缩
• htmlReplace, htmlInsert, htmlExtension：html 变换
• recordFileChanges：本地文件变动记录
• packCssSeparately：是否单独打包 css
• splitJs：分割 js
• staticServerUrl：静态资源服务器地址
• network：服务器配置，可配置多个 web、static服务器
• directoriesToSync：其他需要捅不到服务器的目录（无法加入源代码的文件，如 ueditor）
• enableCssModules：开启 css-modules 功能
• ...

4. 后续

上一篇：前端开发文档

下一篇：组件化

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）