Phages

Phages（/fedʒ/, 噬菌体）是一个项目脚手架，能够为@mucfc.com/和@mu/业务组件提供一套完整的测试、开发、运行环境。

开发理念

现有的@mucfc.com/和@mu/业务组件开发模式，都是把组件和项目相互独立。在开发的过程中，通过在项目的package.json里面引用带tag的prerelease版本，或者通过git+ssh的方式来对业务组件进行开发、测试。但是这种模式有几个严重的弊端：

1. 开发体验差。要想看最新的修改效果，往往需要重新提交、发布，或者在项目里重新安装；
2. 缺少eslint。由于在业务组件的开发项目内引用eslint比较麻烦，所以目前大部分业务组件都存在eslint语法错误；
3. 多人协作困难。同1，由于开发麻烦，所以多人协作的时候往往会出现相互覆盖的情况。

要想解决上述几点问题，为业务组件提供一套独立的开发、测试、运行环境是非常行之有效的办法。这个办法其实就是把业务组件放入一个骨架项目（包含完整的webpack, eslint, babel配置，以及公司业务所需的各种基础utils模块）内，通过npm start直接开启dev server，实时预览组件的开发效果。

适用项目

把类似@mucfc.com/loan和@mucfc.com/repayment的业务组件称为router-config类的component，它们有几个共同的点：

1. 组件包含一个index.js文件，内部暴露了一个config实例用来作统一的配置；
2. 组件配备了完整的路由，拥有一个router.js文件；
3. 调用方在使用的时候，通过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属性内部声明模块，如

   {
     "libraryName": "@mucfc.com/action-sheet",
     "libraryDirectory": ""
   }

针对上述第二种情况，phages会自动读取组件目录的package.json文件，分析出所有以@mucfc.com/开头的依赖，并自动注入到.babelrc当中。若仍然有类似的报错，才需要手动写入。

单元测试

经过改造后的项目，可以使用单元测试的功能。该功能基于karma + mocha实现，具体使用请参考test/unit/目录。