元元 2019-09-05
做前端项目的经历过大概这么几个阶段
这是之前走过的一些路,今天想尝试下其他比较方便的路。
地上本没有路,走的人多了,也便成了路。
并且个人感觉,抄小路有风险,但探索的乐趣和成就感确实很爽呀。
sao.js 是我无意间在github发现的,自己尝试了下,确实还可以,并且过程中让我有其他收获。
sao.js 和yeoman一样也是脚手架工具。readme里面的一段话交代了项目的原因
SAO was made because yeoman, while powerful, is too complex. vue-cli, on the other hand, is more than a scaffolding tool and lacks some important features like unit testing. SAO combines the powerful core features of yeoman with the simplicity of vue-cli into a single application.
其中有一点很想+1, yeoman真的很厉害但是真的也确实很复杂,特别是在在使用过一些cli工具后。但单个的cli工具一般都是为特定框架使用的比如vue 比如angular,这个时候就是尝试sao.js的时候了。
npm i -g sao sao nm node-project
然后就会开始创建git仓库了,如图![[另一种系列] 另一种前端脚手架--sao.js [另一种系列] 另一种前端脚手架--sao.js](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAiZ0c9Sq9xtfvqvNB_7PQSnGNVG5iLrJ_AvMbXWxB0Vt5rrNT-UgUiYeMMQ4cBoBjr4.jpg)
![[另一种系列] 另一种前端脚手架--sao.js [另一种系列] 另一种前端脚手架--sao.js](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAiZq9jWc12M8yl1QlkG2onuUc_D2i5K16YUAveua5j_G6WUofnt4KOsLjDtPH6W1PU0.jpg)
然后开始运行test
yarn test
结果发现checkstyle报错,这样也行,先fix再说
![[另一种系列] 另一种前端脚手架--sao.js [另一种系列] 另一种前端脚手架--sao.js](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAiaFN-okkavpAINiMJdx3yqUGw4DsSP8vo4m_gYd-fF5vE_RlKCMdM0h4S-9VZTEg1w.jpg)
运行
yarn lint-staged
再次run test,居然第一个测试就报错,search了下是缺babel相关依赖
![[另一种系列] 另一种前端脚手架--sao.js [另一种系列] 另一种前端脚手架--sao.js](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAibKrglGXCeWMK1tF6y7mFjvqHFcjFx9Ug-UTmuCAPWsiotrzs9FLzyvu628GnpFey0.jpg)
在package.json 中增加依赖
"@babel/core": "^7.5.5", "@babel/preset-env": "^7.5.5", "babel-core": "7.0.0-bridge.0",
以及在项目加入基本的banel配置,并修改test的script为
"test": "npm run lint && jest --no-cache",
就可以啦![[另一种系列] 另一种前端脚手架--sao.js [另一种系列] 另一种前端脚手架--sao.js](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAianSDHBFynhWkPFKuFkgUnvO7T3d4SAX4a_w4BKYYeB5oIxKNNR8DTbpjc2Psignp8.jpg)
101 done!