phages v1.2.0
Phages
Phages
(/fedʒ/, 噬菌体)是一个项目脚手架,能够为@mucfc.com/
和@mu/
业务组件提供一套完整的测试、开发、运行环境。
开发理念
现有的@mucfc.com/
和@mu/
业务组件开发模式,都是把组件和项目相互独立。在开发的过程中,通过在项目的package.json
里面引用带tag的prerelease版本,或者通过git+ssh
的方式来对业务组件进行开发、测试。但是这种模式有几个严重的弊端:
- 开发体验差。要想看最新的修改效果,往往需要重新提交、发布,或者在项目里重新安装;
- 缺少eslint。由于在业务组件的开发项目内引用eslint比较麻烦,所以目前大部分业务组件都存在eslint语法错误;
- 多人协作困难。同1,由于开发麻烦,所以多人协作的时候往往会出现相互覆盖的情况。
要想解决上述几点问题,为业务组件提供一套独立的开发、测试、运行环境是非常行之有效的办法。这个办法其实就是把业务组件放入一个骨架项目(包含完整的webpack, eslint, babel配置,以及公司业务所需的各种基础utils模块)内,通过npm start
直接开启dev server,实时预览组件的开发效果。
适用项目
把类似@mucfc.com/loan
和@mucfc.com/repayment
的业务组件称为router-config
类的component,它们有几个共同的点:
- 组件包含一个
index.js
文件,内部暴露了一个config
实例用来作统一的配置; - 组件配备了完整的路由,拥有一个
router.js
文件; - 调用方在使用的时候,通过
import { config, router } from '@mucfc.com/component'
的方式引用。
Phages
仅支持对router-config
类型组件的改造由于使用了shell命令,所以很可能只适用于MacOS系统
使用方法
进入组件目录,通过npm下载phages即可:
npm install phages -D
然后在组件目录的package.json
文件内,添加一个script:
"script": {
"phages": "phages"
}
接下来直接执行即可:
npm run phages
项目改造前的目录结构:
.
├── .git
├── .gitignore
├── CHANGELOG.md
├── README.md
├── comp
├── imgs
├── index.js
├── package.json
├── pages
├── router.js
└── vuex
项目改造后的目录结构:
.
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .git
├── .gitignore
├── .npmignore
├── .npmrc
├── .postcssrc.js
├── CHANGELOG.md
├── README.md
├── build # webpack相关
├── config
├── node_modules
├── package.json
├── preview # 骨架工程主要文件(main.js, devNav.vue等)
├── src # 组件源文件
└── test
项目改造前的主要资源文件,都会被phages
统统移动到src/
目录下。
进入/preview
目录,分别在DevNav.vue
,router.js
和/pages
里面添加组件的路由信息。
此时,项目已经改造完毕。
接下来只需要通过npm install
安装依赖,然后执行npm start
即可运行项目。
值得注意的地方
经过项目改造之后,运行的时候可能会报错,主要错误类型有两种:
1. eslint语法错误,需要进入相应的文件逐一修改;
2. 找不到对应模块的报错,如无法找到@mucfc.com/action-sheet
。这种报错很可能并非是模块未安装,而是因为该模块的使用依赖于babel-plugin-import
工具,所以需要手动往.babelrc
的plugins
属性内部声明模块,如
```json
{
"libraryName": "@mucfc.com/action-sheet",
"libraryDirectory": ""
}
```
针对上述第二种情况,phages
会自动读取组件目录的package.json
文件,分析出所有以@mucfc.com/
开头的依赖,并自动注入到.babelrc
当中。若仍然有类似的报错,才需要手动写入。
单元测试
经过改造后的项目,可以使用单元测试
的功能。该功能基于karma + mocha
实现,具体使用请参考test/unit/
目录。
6 years ago