【第1564期】Vue构建工具的设计与实现

汪楠 前端早读课

前言

今日早读文章由京东@Mu小南投稿分享。

@汪楠,京东用户体验设计部-前端开发部,前端工程师

正文从这开始~~

简介:想了解Vue技术栈构建工具设计思路吗?一个简易好用的构建工具都是为了提高生产效率,用工具解放生产力,关注业务开发。

在前端界React、Vue、Angular三足鼎立的形式下,我们也针对Vue技术栈设计了一套构建工具解决方案。力求做到开箱即用,又可以根据实际的项目需求插件式的配置项目模版工程,包含开发、调试、上线整个流程的功能。本文主要讲一下整体的设计思路。

一般Vue2.0技术栈的构建工具需要具备以下几个功能:

  • 脚手架工具

  • Webpack模版

  • 核心组件库

  • 辅助功能

脚手架工具

从 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,模版引擎,将用户提交的动态信息填充到文件中。

脚手架搭建第一步:commander.js命令行界面

第一步:通过commander.js实现命令init项目

program.usage('<name>').parse(process.argv)
let projectName
= program.args[0]
if(!projectName){
program
.help()
return
}

mycli init projectName也许你觉得命令太长,想短一点,也可以支持m2 init projectName。因为 commander支持git风格的子命令处理,格式是[command]-[subcommand],例如:

  • mycli init => mycli-init

  • m2 init => m2-init

所以我在原先的mycli-init.js文件基础上新增加了一个m2-init.js文件。

脚手架搭建第二步:Inquirer.js交互

通过Inquirer.js命令行问答交互方式配置项目信息和插件信息,在myCli中,除了一些基本信息外,还需要选择需要提前打包的第三库,以及一些开发中常用的功能。这里设置的参数名字也是后面模版生成时候占位的名字。

 const answer = await  new Promise((resolve,reject)=>{
if(projectRoot != '.'){
fs
.mkdirSync(projectRoot);
}
return resolve( inquirer.prompt([
{
name
:'projectName',
message
:'项目名称',
default
:'mycli-init'
},
...
]))
})
脚手架搭建第三步:download-git-repo下载模板

通过 download-git-repo去git库下载模版集合。这里的dev分支存储了vue、vuex、skeleton、typescript四套模版。这里是统一全部都下载下来,然后根据命令行交互的信息进行筛选和处理。

module.exports = function(target){
target
= path.join(target || '.','.download-temp')
return new Promise (function(resolve,reject){
const url
= 'direct:https://github.com/'
const spinner
= ora('正在下载模版')
spinner
.start()
download
(url,target,{clone:true},(err)=>{
if(err){
spinner
.fail()
reject
(err)
}else{
spinner
.succeed()
resolve
(target)
}
})
})
}
脚手架搭建第四步:metalsmith、handlebars生成模板

generator.js 处理所有信息输出最终工程模版。传入metadata数据、下载的临时文件夹地址、最终模版生成的目录地址。通过 metalsmith 和 handlebars 处理模版,删除不需要的文件,填入模版动态数据。

 const res = await generator(context.metadata,context.downloadTemp,dest);

因为download的模版是一个集合,那么我们怎么根据Inquirer.js选择的工程信息匹配到对应的模版,这里还需要一个template.ignore文件。该文件配置了文件查找的匹配规则,

{{#if Skeleton}}
skeleton
/**
skeleton
/.*
{{else if TypeScript}}
ts
/**
ts
/.*
{{else if vuex}}
vuex
/**
vuex
/.*
{{else if vue}}
vue
/**
vue
/.*
{{/if}}
return new Promise((resolve,reject)=>{
const metalsmith
= Metalsmith(process.cwd()).metadata(metadata).clean(false).source(src).destination(dest);
//判断是否存在ignore文件
const ignoreFile
= path.join(src,'templates.ignore');
if(fs.existsSync(ignoreFile)){
metalsmith
.use((files,metalsmith,done) =>{
const meta
= metalsmith.metadata();
const ignores
= Handlebars.compile(fs.readFileSync(ignoreFile).toString())(meta)
.split('\n').filter(item=>!!item.length)
//删除文件
done()
}).build(err=>{
metalsmith
.use((files, metalsmith,done) => {
const meta
= metalsmith.metadata()
Object.keys(files).forEach(fileName => {
if(fileName.indexOf('/src/') == -1){ //忽略业务代码
let t
= files[fileName].contents.toString()
files
[fileName].contents = new Buffer(Handlebars.compile(t)(meta))
}
})
done();
}).build(err => {
//移动文件
})
})
}
})
脚手架搭建第五步:ora、log-symbols美化

通过ora、chalk 和 log-symbols 美化脚手架

在下载模版时候,或者获取库版本时候,都会比较慢,如果终端没有给出任何信息似乎体验上会比较差,在下载模版的时候,增加了 ora 代码:

const spinner = ora('正在下载模版')
spinner
.start()
download
(url,target,{clone:true},(err)=>{
if(err){
spinner
.fail()
reject
(err)
}else{
spinner
.succeed()
resolve
(target)
}
})

在最终工程模版生成的时候,可以给出字体颜色表示是否成功,例如:

console.log(logSymbols.success,chalk.green('创建成功:)'));
console
.log(logSymbols.error,chalk.red(`创建失败:${err.message}`));

Webpack 模版

有了命令行工具,我们还需要Webpack工程模版。与时俱进,当然需要一些新的变化,比如Webpack4.0和 Babel7。

Webpack4.0

将Webpack从3.x升级到了4.x。简单罗列一下升级中需要注意的点:

  1. 推荐使用node版本 >=8.9.0,在使用时候可以有更好的体验

  2. 借鉴了parcel零配置构建思想,新增了模式配置:mode,可选值是production 和 development。mode不可缺省,需要二选一:

production 模式:

默认提供所有可能的优化,如代码压缩/作用域提升/tree-shaking 等

不支持watching process.env.NODE_ENV 的值不需要再定义,默认是 production

development 模式:

主要优化了增量构建速度和开发体验

process.env.NODE_ENV的值不需要再定义,默认是development

在Webpack配置文件中,我们往往需要拿到当前的npm命令执行的模式,可以如下拿到参数值:

"dev": " webpack-dev-server --mode development   -d --open --hide-modules --progress",
"build": "webpack --mode production --hide-modules --progress",
"upload": "webpack --mode production --env.upload --hide-modules --progress",
module.exports = (env,argv)=> {
if(argv.mode === 'production'){
//判断是否是生产环境
}
if(env && env.upload){
//判断是否是编译上传
}
}

在Webpack打包优化方面,对于第三方的依赖库,例如vue、vuex、vue-router等我们会单独提前预先 Dllplugin 打包 vendor 文件。那么可以对比一下构建 vendor 的大小和时间。

Webpack3 效果如下:

Webpack4 效果如下:

从打包上看,对于Vue第三方库全家桶,4.x 比 3.x 减少了14%。时间也减少了8%。4.x在打包编译构建速度上做了很大优化,这里就不展开了,对于整体项目构建提升效果是很明显的。

  1. MiniCssExtractPlugin替代 ExtractTextWebpackPlugin,如果还想用 ExtractTextWebpackPlugin,可以下载 next 版本。

Babel7

曾经在做移动端页面的时候,为了使用es6或者es7语法,又要兼容比较低版本的android或者ios等使用场景,我们只能加载完整版本80kb左右的polyfill文件。Babel7真正做到按目标浏览器兼容的浏览器按需加载 polyfill文件。如何做到呢?我们看一下 .babelrc文件。首先配置 babel preset env:将 ES6 的代码转成 ES5 (注意: babel-preset-es2015 已经被废弃了)。设置目标浏览器的范围,设置 useBuiltIns:usage。usage是新特性,可以只打包业务代码中需要转换的polyfill。

{
"presets": [
["@babel/preset-env",
{
"modules":false,
"targets":{
"browsers": ["> 1%", "last 2 versions", "not ie <= 8","Android >= 4","iOS >= 8"]
},
"useBuiltIns":"usage"

}]
],
"plugins": [
["@nutui/babel-plugin-separate-import",{"style":"css"}],
"@babel/plugin-syntax-dynamic-import"

]
}

测试源码如下:

 let m = [3,4];
console
.log([...this.spread,...m]);
let obj
= Object.assign({},this.obj);
for(let a of m){
console
.log(a);
}

使用useBuiltIns:usage打包:

这结果是不是很让人兴奋。

模版集合

当我们搭建完Webpack4的工程模版后,为了进一步降低用户的使用的难度,从项目的实践中总结和抽取比较完整的模版方案:Vue、Vuex、TypeScript、Skeleton 四套模版。目前暂时支持这些,后续考虑加入活动页模版、PC端模版等

核心组件库NutUI2.0

对于一个Vue技术栈来说,少不了实用的组件库。现在业界有很多优秀的组件iView、element等。不过我们团队做的NutUI2.0 Vue组件库也同样优秀,不仅服务于部门内部,也服务于公司的其他部门团队。目前有30+数量的组件,大多数来源于京东app、京东me等使用场景的实际项目积累和沉淀。基于京东APP 7.0 视觉规范。在项目中,推荐使用按需加载方式调用组件代码,减小打包体积。同时支持组件内挂载,也支持全局挂载。

import { DatePicker,Button,Rating } from '@nutui/nutui';
...
export default
{
data
(){
return{
}
},
components
: {
'nut-datepicker':DatePicker,
'nut-button':Button,
'nut-rating':Rating
}
}
import { Cell,Dialog } from '@nutui/nutui';
Vue.use(Cell);
Vue.use(Dialog);

辅助功能

我们团队开发了许多提高效率插件和功能,以增强开发体验。

  • 一键上传

  • carefree:webpack插件,开发阶段自动编译上传测试服务器,提供二维码真机调试

  • smock:webpack插件,开发阶段基于Swagger的自动化mock假数据

  • skeleton:利用骨架屏vue组件和vue-server-reander 手写注入骨架屏html和css

小结

最后通过脚手架工具、Webpack模版、核心组件库NutUI2.0和辅助功能四个方面的讲解,大家对Vue2.0构建工具有所了解吧。整体的设计就如下图:

整体的设计学习借鉴了很多业界前辈分享的经验,结合项目中的实践的经验,给出一套解决方案,希望能给大家一点启发和帮助。

欢迎使用和关注

  • NutUI2.0 地址:http://nutui.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/

关于本文
作者:@Mu小南(公号ID:全栈探索)
原文:https://mp.weixin.qq.com/s/dAK3mBkQK0gm9hKN-hhHXQ

曾分享过


京东开源Vue移动端组件库NutUI2.0发布


为你推荐


【第1272期】从零开始搭建脚手架


【第1275期】基于node.js平台的脚手架开发经历

    Read more
    Added to Top Stories

    Sending