create-react-app｜Trekerz's blog

使用npx创建一个react项目
npx create-react-app test
如果是想要创建Typescript版的项目，则使用下面这条命令：
npx create-react-app test --typescript
编辑.editorconfig文件

.editorconfig是用来统一项目编码格式的文件，在某些ide中，不需要插件即可生效，但在 VScode 里需要安装EditorConfig for VS Code才能使该文件生效。下面是.editorconfig的一段示例代码：
# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

安装less支持

使用 create-react-app 安装的react应用默认是把webpack的配置、工具都隐藏来(不可以配置)的，如果要安装less，就需要先把webpack的配置、工具都暴露出来。create-react-app 就提供这样的一个暴露命令：

npm run eject

然后，安装 less 及其类型文件：

npm install -D less less-loader

最后，在 config/webpack.config.js 中配置less-loader：

module.exports = {
  ...
  module: {
  ...
    {
      test: lessRegex,
      exclude: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'less-loader'
      ),
      sideEffects: true,
    },
    {
      test: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction && shouldUseSourceMap,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
      ),
    },
    ...
  }
  ...
}

安装测试库Enzyme

npm install -D enzyme @types/enzyme react-addons-test-utils

接着为Enzyme安装react适配器：

npm install -D enzyme-adapter-react-16

注意不同的react版本对应不同的enzyme-adapter-react版本。

安装状态管理工具Redux（或MobX）
npm install -S redux react-redux @types/react-redux
具体使用请看：添加状态管理

–end–

create-react-app

流程套路

标签

友链