简单搭建一个react开发环境

发表于 | 分类于

1一个正常的前端工程化环境

  想到react环境的话第一就是create-react-app呗，官方指定脚手架。然而，一个正常的前端开发环境，测试要有吧，生态组件要有吧，CI要有吧，就算不用typescript，起码的ES6要用上吧。仅仅是用上react，只需要在html头引入react库就够了，但是一个能用的前端工程化环境绝对不是一个引入了各种库的html就够了。

  话是这么说的，但是啥玩意儿都是从简到繁的，所以这里先搭建一个react的基础环境。

2 router，network，ui，typescript，sass

  路由使用connected-react-router，因为react-router-dom路由跳转都是包装好的，同时我们需要对router状态做一些处理，所以就需要用这个包，具体情况如下见Deep Redux Integration。全局状态管理使用redux，（主要是没用过其他的状态管理库）。网络方面由于redux不能处理网络请求，所以使用redux-thunk。具体的请求库使用axios，（其实并没有用到很多axios相关的特性，只用到了一个能cancel network的方法）。UI用antd（项目上都是自己写的组件，但是有一说一人家组件比自己写的好多了）。然后Typescript也是需要的（都0202年了不会还有人不用typescript吧，不会吧不会吧）

  第一个问题出现了，UI库的css不论是antd还是bootstrap的css文件都是没有css module的，当你在index.tsx文件中import css文件会一次性加载所有css。antd官方文档有提供解决方案，antd按需加载。这里的那个react-app-rewired可以在不eject react-script的情况下更改react-script的webpack配置。
  然后install typescript，这里有个问题，那就是很多库没有定义过类型信息(比如react)。就需要install @type/react这样的东西，那如果有些东西在npm上面没有类型定义呢，比如我要导入一个svg，本来直接import就好了，但是typescript需要知道svg的类型信息，那就只能自己定义一个svg的类型。
  在typescript里面申明类型信息，src里面建立一个index.d.ts如下写就好了 

1
2
3
4
5
6
7
8
9
10
11
12
13
/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />


declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;

  const src: string;
  export default src;
}

  上面那个三斜杠表示引用项，下面的declare表示定义模块类型信息。这里有点被坑惨了….之前eject react-script之后直接run start是会直接can not find module svg，事实上不eject直接run react-script会在react-script里面自动生成一个react-app.d.ts用于定义一些resource的类型，emmm就当学习了…….
  最后是sass，这个简单，脚手架已经配置好了loader，只需要install sass-node就好了，这里sass的npm下载可能很慢，建议cnpm。如果之前的antd有配置过按需加载，比较建议的是在项目根目录添加.npmrc或者.yarnrc文件来指定具体的源。

3 测试

  一个工程化的项目单元测试一定是要的伐，前端单元测试框架那么多我当然就用现在组里在用的那个jest。在jest之前有用过mocha，但是对于它UI测试很不友好，CRA(create react app简称，我以后都这么叫好了..)自带有jest，那么咱就安装@types/jest，enzyme，jest-enzyme，enzyme-adapter-react-16(这个包按照react版本来)。 enzyme是一个很好用的测试util库，主要用到断言。
  一般来说，如果是自己整的jest环境，还需要写几个文件去mock 静态资源文件，比如svg，jpg，css。非常开心CRA都自己写好了mock数据的配置文件。然后是enzyme的问题，enzyme想要测试react的话，按照官方文档，我们需要 

1
2
3
4
5
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'jest-enzyme';

configure({ adapter: new Adapter() });

  这么一个配置项写到指定jest的setupTests文件。然后弄了半天的我发现react-script其实有定义默认的setupTests…..路径为src/setupTests.ts。也就是说我们只需要在src目录下面新建setupTests.ts文件，然后把以上代码复制进去就够了。其实还是比较建议看一看react-script里面具体有哪些文件是默认可配置的…
default configure path