cra-template-kiwi

cra-template-kiwi

这是一个React Typescript模板，配合Create React App使用，create-react-app版本要求3.3.0以上（搭建该模板时使用的4.0.3）

使用

执行以下命令create-react-app会去拉取该项目线上的的template模板，拉取完还要cd到项目执行一下yarn bootstrap是为了更新一下项目的tsconfig.json（原因可以看下面的tsconfig会被覆盖小节）

npx create-react-app [app-name] --template kiwi
cd [app-name]
yarn bootstrap // 更新tsconfig.json

部署

更改package.json中的version，然后执行npm publish即可将cra-template-kiwi部署到npm上

npm publish

调试

本地调试需要使用create-react-app拉取模板，但是这样需要我们将模板部署到线上，为了不污染线上版本，我们可以先将模板部署到cra-template-kiwi-test，等调试功能正常后再部署到cra-template-kiwi，具体操作如下：

1. 将package.json中的name改成cra-template-kiwi-test，version改成大于cra-template-kiwi-test npm线上版本
2. 将create-react-app的template参数设置成kiwi-test(如下) npx create-react-app my-app --template kiwi-test

执行以下命令，可以本地测试template（参考这里）

npx create-react-app my-app --template file:../path/to/your/template/cra-template-[template-name]

模板搭建笔记

项目工程化

为了让模板更加的开箱即用，我们添加了很多好用的功能，如环境变量配置、redux引入、webpack配置等等，搭建过程中的问题和笔记都记录在这里。

注意

该模板参考create-react-app官方提供的Custom Templates搭建，所以有些文件是必要的的，具体可以看Custom Templates说明。

以下文件是必须的

cra-template-kiwi/
  README.md (for npm)
  template.json
  package.json
  template/
    README.md (for projects created from this template)
    gitignore
    public/
      index.html
    src/
      index.tsx

最终的模板会是cra-template-kiwi/template中的内容，其中gitignore会被转换成.gitignore，package.json则根据cra-template-kiwi/template.json生成

tsconfig会被覆盖

下面是tsconfig的默认操作

The following changes are being made to your tsconfig.json file:
  - compilerOptions.allowJs to be suggested value: true (this can be changed)
  - compilerOptions.esModuleInterop to be suggested value: true (this can be changed)
  - compilerOptions.forceConsistentCasingInFileNames to be suggested value: true (this can be changed)
  - compilerOptions.noFallthroughCasesInSwitch to be suggested value: true (this can be changed)
  - compilerOptions.module must be esnext (for import() and import/export)
  - compilerOptions.resolveJsonModule must be true (to match webpack loader)
  - compilerOptions.isolatedModules must be true (implementation limitation)
  - compilerOptions.noEmit must be true
  - compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)
  - compilerOptions.paths must not be set (aliased imports are not supported)
  - include should be src

这是create-react-app为了配合react-script所做的限制（原因可以看这篇文章），但是本模板的启动脚本时自定义的，需要对tsconfig进行修改，具体解决办法是使用create-react-app创建完项目后运行yarn bootstrap，该命令会将template将项目的tsconfig.json替换成scripts/config/tsconfig-custom.json中的内容