简介:想了解我们最新开发Vue技术栈的构建工具
Gaea4.0
吗?它拥有许多新的特性:Webpack4
、Babel7
、京东特色的Vue
组件库NutUI2.0
等等。
前言
我们团队在最近两年慢慢从PC端转移到移动端,技术栈从 JQuery
、zepto
等DOM操作转移到 Vue
、React
等新的技术栈。曾经部门的构建工具 JDF
已经慢慢退出舞台,现在对于新的技术栈需要新的构建工具 Butler
和 Gaea4.0
。本文主要介绍Gaea4.0
,它依然需要秉承 JDF
的定位,力求解决部门团队减少配置开发环境的工作量,做到开箱即用。又可以做到自定义配置,方便开发者根据实际情况插件式的配置开发环境。包含从开发、调试、上线整个流程的功能。下面将全面的介绍一下 Gaea4.0
构建工具。
Gaea4.0
从最初的一个 Webpack
的模版,慢慢演变成一个Vue2.0技术栈的工程具备了以下几个功能:
- cli脚手架工具
- Webpack模版
- 核心组件库
NutUI2.0
- 辅助功能
cli脚手架工具
从 Vue-cli
的整体设计可以学习到cli构建工具和模版相分离的设计思路,我们可以通过命令行,选择匹配不同的模版下载,用于不同的开发需求。分开维护的好处是,模版的变动更新,并不需要用户端重新发布和安装cli构建工具,并且也保证了一致性,当我们有发现模版bug,修复后,也能及时同步远端。
如上图所示,将不同场景的可直接运行的webpack模版代码放在 git
上维护,通过 nodejs
命令行交互方式获取用户配置项目信息和插件信息,通过 metadata
模版渲染方式,将模版和自定义部门相结合,最后输出用户需要的模版工程代码。
先了解一下需要的第三库:
commander.js,可以自动解析命令参数,用于处理用户输入的命令。
download-git-repo,下载并提取git仓库,用于下载模版。
Inquirer.js,通用的命令行用户界面集合,用于和用户进行交互。
ora,下载过程loading动画效果。
chalk,可以给终端字体颜色。
log-symbols,在终端上显示对勾或者叉图案。
latest-version,获取库最新版本号。
metalsmith,静态网站生成器,批量处理模版。
handlebars.js,模版引擎,将用户提交的动态信息填充到文件中。
一点一滴搭建cli脚手架
第一步:通过 commander.js
实现命令init项目
1 | program.usage('<name>').parse(process.argv) |
gaea init projectName
也许你觉得命令太长,想短一点,也可以支持 g2 init projectName
。因为 commander
支持git
风格的子命令处理,格式是 [command]-[subcommand]
,例如:
- gaea init => gaea-init
- g2 init => g2-init
所以我在原先的 gaea-init.js
文件基础上新增加了一个 g2-init.js
文件。
第二步:通过 Inquirer.js
命令行问答交互方式配置项目信息和插件信息,在 Gaea
中,除了一些基本信息外,还需要选择需要提前打包的第三库,以及一些开发中常用的功能。这里设置的参数名字也是后面模版生成时候占位的名字。
1 | const answer = await new Promise((resolve,reject)=>{ |
第三步:通过 download-git-repo
去 git
库下载模版集合。这里的 dev
分支存储了vue
、vuex
、skeleton
、typescript
四套模版。这里是统一全部都下载下来,然后根据命令行交互的信息进行筛选和处理。
1 | const download = require('download-git-repo'); |
第四步:generator.js
处理所有信息输出最终工程模版。传入 metadata
数据、下载的临时文件夹地址、最终模版生成的目录地址。通过 metalsmith
和 handlebars
处理模版,删除不需要的文件,填入模版动态数据。
1 | const res = await generator(context.metadata,context.downloadTemp,dest); |
因为download的模版是一个集合,那么我们怎么根据 Inquirer.js
选择的工程信息匹配到对应的模版,这里还需要一个 template.ignore
文件。该文件配置了文件查找的匹配规则,
1 | {{#if Skeleton}} |
1 | return new Promise((resolve,reject)=>{ |
第五步:通过 ora
、 chalk
和 log-symbols
美化脚手架
在下载模版时候,或者获取库版本时候,都会比较慢,如果终端没有给出任何信息似乎体验上会比较差,在下载模版的时候,增加了 ora
代码:
1 | const spinner = ora('正在下载模版') |
在最终工程模版生成的时候,可以给出字体颜色表示是否成功,例如:
1 | console.log(logSymbols.success,chalk.green('创建成功:)')); |
完成上面5个步骤之后,我们看一下脚手架的实际效果:
Webpack 模版
有了命令行工具,我们还需要 Webpack
工程模版,在最开始的时候 Gaea
只是一个 Vue
单页面的 Webpack
的模版。用于项目的开发、打包编译、上传。那 Gaea4.0
给我们带来哪些新变化 Webpack4.0
和 Babel7
Webpack4.0
趁着这次的工具的开发,直接将Webpack从 3.x
升级到了 4.x
。简单罗列一下升级中需要注意的点:
- 推荐使用
node
版本 >=8.9.0,在使用时候可以有更好的体验 - 借鉴了
parcel
零配置构建思想,新增了模式配置:mode
,可选值是production
和development
。mode
不可缺省,需要二选一:
production 模式:
默认提供所有可能的优化,如代码压缩/作用域提升/ tree-shaking
等
不支持watchingprocess.env.NODE_ENV
的值不需要再定义,默认是 production
development 模式:
主要优化了增量构建速度和开发体验process.env.NODE_ENV
的值不需要再定义,默认是 development
在 Webpack
配置文件中,我们往往需要拿到当前的 npm
命令执行的模式,可以如下拿到参数值:
1 | "dev": " webpack-dev-server --mode development -d --open --hide-modules --progress", |
1 | module.exports = (env,argv)=> { |
在 Webpack
打包优化方面,对于第三方的依赖库,例如vue
、vuex
、vue-router
等我们会单独提前预先 Dllplugin
打包 vendor
文件。那么可以对比一下构建 vendor
的大小和和时间。
Webpack3
效果如下:
Webpack4
效果如下:
从打包上看,对于Vue第三方库全家桶,4.x
比 3.x
减少了14%。时间也减少了8%。4.x
在打包编译构建速度上做了很大优化,这里就不展开了,对于整体项目构建提升效果是很明显的。
MiniCssExtractPlugin
替代ExtractTextWebpackPlugin
,如果还想用ExtractTextWebpackPlugin
,可以下载next
版本。
Babel 7
曾经在做移动端页面的时候,为了使用 es6
或者 es7
语法,又要兼容比较低版本的 android
或者 ios
等使用场景,我们只能加载完整版本80kb左右的 polyfill
文件。Babel7
真正做到按目标浏览器兼容的浏览器按需加载 polyfill文件
。如何做到呢?我们看一下 .babelrc
文件。首先配置 babel preset env
:将 ES6
的代码转成 ES5
(注意: babel-preset-es2015
已经被废弃了)。设置目标浏览器的范围,设置 useBuiltIns:usage
。usage
是新特性,可以只打包业务代码中需要转换的 polyfill
。
1 | { |
测试源码如下:
1 | let m = [3,4]; |
使用 useBuiltIns:usage
打包:
这结果是不是很让人兴奋。
模版集合
当我们搭建完 Webpack4
的工程模版后,为了进一步降低用户的使用的难度,从项目的实践中总结和抽取比较完整的模版方案:Vue
、Vuex
、TypeScript
、Skeleton
四套模版。目前暂时支持这些,后续考虑加入活动页模版、PC端模版等
核心组件库NutUI2.0
对于一个 Vue
技术栈来说,少不了实用的组件库。现在业界有很多优秀的组件 iView
、element
等。不过我们团队做的NutUI2.0 Vue
组件库也同样优秀,不仅服务于部门内部,也服务于公司的其他部门团队。目前有30+数量的组件,大多数来源于京东app、京东me等使用场景的实际项目积累和沉淀。基于京东APP 7.0 视觉规范。Gaea4.0
是默认安装 @nutui/nutui
组件库 npm
包和 @nutui/babel-plugin-seperate-import
按需加载插件 npm
包。在项目中,推荐使用按需加载方式调用组件代码,减小打包体积。同时支持组件内挂载,也支持全局挂载。
1 | import { DatePicker,Button,Rating } from '@nutui/nutui'; |
1 | import { Cell,Dialog } from '@nutui/nutui'; |
辅助功能
我们团队开发了许多提高效率插件和功能,Gaea4.0
都进行有效整合,方便用户使用。
- 一键上传
- carefree:webpack插件,开发阶段自动编译上传测试服务器,提供二维码真机调试
- smock:webpack插件,开发阶段基于Swagger的自动化mock假数据
- skeleon:利用骨架屏vue组件和vue-server-reander 手写注入骨架屏html和css
小结
最后通过cli脚手架工具、Webpack
模版、核心组件库 NutUI2.0
和辅助功能四个方面的讲解,大家对 Gaea4.0
有所了解吧,它力求做一个简易好用的 Vue
技术栈构建工具。整体的设计就如下图:Gaea4.0
学习了很多业界前辈分享的经验,结合项目中的实践的经验,最后得出的一点小成果,希望能给大家一点启发和帮助。
欢迎使用和关注
github 地址:https://github.com/jdf2e/Gaea4/
npm 地址:https://www.npmjs.com/package/gaea-cli
NutUI2.0 地址:http://nutui.jd.com/
相关资源
Butler:http://butler.jd.com
iView: https://www.iviewui.com/
element: http://element-cn.eleme.io
carefree: http://carefree.jd.com
smock: http://smock.jd.com
commander.js: https://github.com/tj/commander.js/
download-git-repo: https://github.com/flipxfx/download-git-repo
Inquirer.js: https://github.com/SBoudrias/Inquirer.js/
ora: https://github.com/sindresorhus/ora
chalk: https://github.com/chalk/chalk
log-symbols: https://github.com/sindresorhus/log-symbols
latest-version: https://github.com/sindresorhus/latest-version
metalsmith: https://github.com/segmentio/metalsmith
handlebars.js: https://github.com/wycats/handlebars.js/