【React UI工程化】持续集成及项目搭建总结
什么是工程化
工程化.png
- 如果团队比比较扁平，推荐使用git，团队层级比较明显，推荐svn；
测试覆盖率
覆盖率.png
1、步骤（添加内容可看github）
①在jest.config.js中添加五句话；
②安装jest-junit依赖；
③package.json的scripts里添加一句命令：cross-env NODE_ENV=test JEST_JUNIT_OUTPUT=./test-results/jest/results.xml jest --config=jest.config.js，暂时命名为“xxx”；
④yarn xxx，会生成一个coverage目录，具体操作看下图，打开index.html就可看到各个文件的代码测试覆盖率；
coverage.png
- 要先创建一个test-results目录，再
yarn xxx，JEST_JUNIT_OUTPUT=./test-results/jest/results.xml下面的文件才会生成（这个目录主要是给CI看的，开发者不用看，所以这个目录要ignore）；
持续集成
目前比较流行的工具
- 有免费的有收费的，区别是：操作是否友好、性能是否够用；工具列表
- 免费的：
Circle CI （本次代码选用这个，用github登录）
Travis CI - 收费的：
Code Climate（这个功能比较强大）
配置 Circle CI
1、自动测试
①以github注册Circle CI，在注册前我们可以先把本次CI的配置文件（.circleci目录下的config.yml文件，文件里面的配置copy即可）先加入并提交；
②注册完成后，根据步骤选择仓库，然后开始Start building；这时就开始按照你config.yml配置的步骤开始工作了；
③这里需要注意的点：config.yml文件中的node版本是否正确；反正就是根据fail提示来见招拆招；
ci.png
2、自动打包
自动打包的配置在config.yml文件里的build配置里
- 我们写的是一个UI库，所以要在入口文件中把这个UI单元文件导出去；最直观的写法是（引入后再导出去）：
import Icon from './icon/icon';
export {Icon};
但是上面的写法可以变成下面的一句话：
export {default as Icon} from './icon/icon';
具体的知识点可阅读export {default as} from 【深入解读】
- package.json中添加一句
"files": ["/dist/**/*"]（注意不要写成"files": ["/dist/"]）
3、自动发布
下面的步骤只是在手动发布啦
-
在提交正式库之前，package.json中的name不要写得太简单，防止别人搜到直接下载下来，到正式发布时再改名字；version要弱版本0.01；
image.png
-
npm publish时
报错401是未登录npm，npm adduser输入账号密码即可；
报错403是提交的版本号重复了，改一下版本号即可； -
注意！！！
npm adduser时npm源要切回npm官方源，否则会报错！！！npm publish后可再切回淘宝源；（具体步骤可参照darkTi UI的第二节笔记）
image.png
这时我们已经把包发布到npm了，用户可以通过
npm install dui666来安装我们的库了！！！
下面让我们开始不用npm publish就可以自动发布的配置吧~~
-
config.yml文件里配置publish操作；此时还需要npm的登录，
npm config set //registry.npmjs.org/:_authToken $NPM_TOKEN中$NPM_TOKEN是什么呢？
①去npm官网生成一个access token；
②把这个access token添加到Circle CI对应项目里，projects -> 对应项目 -> Project Settings -> Environment Variables，添加进去就好啦~~~
③这时你的CI就可以获取到你的npm账号权限并把打好的包发布到npm上啦 - 自动修改package.json里的版本号，
npm version [major/minor/patch]；
major.minor.patch --> （大版本/小版本/补丁版本）
patch：16.8.2 -> 16.8.3 API不变，修复了bug
minor：16.8.2 -> 16.9.0 API有变化，但变化不大，不影响现有代码
major：16.8.2 -> 17.0.0 API变化很大，影响现有代码
-
想要自动修改完版本号后就能自动push，写一个deploy.sh脚本（具体写法看github）；
①运行sh ./deploy.sh major/minor/patch即可，注意，命令是需要跟一个参数（major/minor/patch）的，指定你要修改哪个层级版本号；
②至此你的代码就可以完成自动修改版本号并push、自动测试、自动打包、自动发布这一系列步骤啦！！！！
4、发布特定分支的代码
- 因为你不可能随便push一下就发布到npm啊，所以我们对发布的时候做一个限制，只对一个分支上的代码进行发布；
- 所以我们需要修改config.yml文件里的publish操作
- publish:
requires:
- build
filters:
branches:
only: /deploy/
- 创建deploy分支，
git checkout deploy在deploy分支运行sh ./deploy.sh major/minor/patch即可；这样，你只有切到deploy分支后运行sh ./deploy.sh major/minor/patch才会进行CI中这一系列操作（即才会上传至npm）~~~~
添加小徽标
JS、JSX、TS、TSX的区别
- 先说X，X一般在编程领域有两个意思，一是代表十，例如iphoneX；二是代表扩展extension；JSX和TSX的X的扩展都是语法的扩展，让它们可以支持标签，
return <div></div>（就是XML）； - TS相对于JS而言，只是多了类型检测；
- JSX对于JS和TSX对于TS，也都只是扩展了XML的语法；
- 所以TSX是里面功能最强大的；我们一般都直接用TSX
-
它们的关系如下：
image.png
单独为CI创建一个jest.config.ci.js
- 每次
yarn test的时候都会测一遍覆盖率，其实在本地测试的时候我们不需要每次都要覆盖率，所以我们才需要单独为CI创建一个jest.config.ci.js，这样yarn test的时候就不会测试覆盖率，yarn ci的时候才会测试覆盖率（因为package.json中的命令调整了）；
制作一个官网
-
example.tsx
-
yarn add react-router-dom @types/react-router-dom --dev
-
我们的index.tsx是源代码，目的是导出组件以供用户使用，所以我们就需要自己单独建一个example.tsx文件来测试
image.png
-
只需要在webpack.config.dev.js添加修改如下代码，它在开发环境下可以覆盖webpack.config.js里的entry属性；这样就可以把example.tsx用作测试页面了；
①添加entry属性；
②plugins里的index.html换成example.html；
entry: {
example: './example.tsx' //入口文件，example是文件名，可以改成其他的名字
},
plugins: [
new HtmlWebpackPlugin({
title: 'DUI',
template: 'example.html'
})
]
- 安装路由，
yarn add react-router-dom @types/react-router-dom --dev，自己写一个官网（也相当于是一个测试页面）；
项目搭建总结
- 我们安装了许多插件，其中比较重要的是
awesome-typescript-loader和html-webpack-plugin（面试的时候可着重说下它两），要清楚它们是你 干什么的； - 高级程序员大多都是在做一些设计和限制；
