如何创建一个标准react项目模板

第一步，开发环境的检查

在开始一切操作之前, 请检查你的 vscode 工作路径是否有包含中文, 如果有, 请修改它们至你硬盘的某个分区的根目录/example 或/workspace 以避免需要解决一些无意义的错误。
检查你的 nodejs 的版本号
检查你的 npm 的镜像地址（最好使用淘宝镜像模式）

node -v

npm config list

// 如果显示 metrics-registry = "http://registry.npmjs.org/"
// 执行 npm config set registry https://registry.npm.taobao.org

yarn config list

// 同样的, 如果发现镜像不在taobao的, 修改它
// 执行 yarn config set registry https://registry.npm.taobao.org

使用 react 脚手架创建项目

使用 cnpm-create-react-app, cnpm-create-react-app 与你先安装 create-react-app 是同样的效果, 只是 cnpm 执行了三个步骤

cnpm-create-react-app 你的项目名

// 如果你要建的是一个ts项目, 在后面加上--typescript

cnpm-create-react-app 你的项目名 --template typescript
// 注意，中文文档是有问题的, 这里需要--template typescript

// 项目创建完成后, 通过终端进入你的项目文件夹

cd 你的项目名

依赖安装

每一次新建项目, 第一件事不是 start,而是 install。所以不要急着运行你的项目, 你需要做的第一件事是安装一些必要的依赖

// router 这俩是react项目不可或缺的, 稍后我们会在react的基础回顾中带着你们重新捋一捋这块的内容
npm i -S react-router react-router-dom
// redux 看你项目的情况决定是否要安装
npm i -S redux react-redux
// axios 目前用的比较多的http库, 基于promise, 可以同时运行在node和浏览器中, 有极其丰富的配置项
npm i -S axios
// 看你项目的情况, 安装antd或者antd-mobile, 所以这里我们安装antd
npm i -S antd
// antd-mobile与它的依赖
// npm i -S antd-mobile postcss-px2rem-exclude rc-form

// 以下的内容只在开发环境依赖, 所以我们通过-D指令将它们安装在devDependencies里面
// reactAppRewired与customize-cra是比较重要的插件, 一定要安装
// react-app-rewired是让你在不执行"npm run eject"指令也能改变内置的webpack中的配置的一个插件；
// customize-cra 是依赖于 react-app-rewired 的库, 通过 config-overrides.js 来修改底层的 webpack, babel配置
npm i -D react-app-rewired customize-cra
// antd的按需加载, 无论你是使用antd还是antd-mobile, 都需要安装
npm i -D babel-plugin-import
// 安装对于less的支持
npm i -D less less-loader

增加配置文件

我们刚刚安装了"react-app-rewired"与"customize-cra"这两个依赖, 也说到了, customize-cra 是能通过一个叫 config-overrides.js 的文件来修改你的 webpack 的配置而不再需要运行 npm run eject 来暴露 webpack 配置文件。
所以, 现在我们要在你的根目录增加 config-overrides.js 文件, 增加装饰器、less、antd 与路径别名的相关配置。

const path = require('path');

const {
  override,
  addWebpackAlias,
  addLessLoader,
  addDecoratorsLegacy,
  addPostcssPlugins,
  fixBabelImports,
  overrideDevServer,
} = require('customize-cra');

/**
 * 代理配置
 */
const addProxy = () => config => {
  return {
    ...config,
    proxy: {
      '/api': {
        // 环境设定后期会讲, 这里可以参考.env中的配置
        target: process.env.REACT_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  };
};

module.exports = {
  webpack: override(
    // 使用修饰器
    addDecoratorsLegacy(),
    // 加载less文件
    addLessLoader({
      lessOptions: {
        javascriptEnabled: true,
      },
      sourceMap: true,
    }),
    // rem, 仅移动端开发时需要
    addPostcssPlugins([
      require('postcss-px2rem-exclude')({
        // 这里我们设定标准大小为37.5,这样在css中使用时只需按照设计图的标准尺寸写px就能正常转换
        // 比如750px就是标准页面宽度
        remUnit: 37.5,
        propList: ['*', '!border'],
        exclude: /node_modules/i,
      }),
    ]),
    // antd按需加载工具, 具体用法参考以下链接
    // https://github.com/ant-design/babel-plugin-import
    fixBabelImports('import', {
      libraryName: 'antd-mobile',
      style: 'css',
    }),
    // 路径别名
    addWebpackAlias({
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@pages': path.resolve(__dirname, 'src/pages'),
      '@actions': path.resolve(__dirname, 'src/actions'),
      '@reducer': path.resolve(__dirname, 'src/reducer'),
      '@utils': path.resolve(__dirname, 'src/utils'),
      '@assets': path.resolve(__dirname, 'src/assets'),
    })
  ),
  // 开发环境服务器代理, 一般情况下不需要我们自己配
  devServer: overrideDevServer(addProxy()),
};

修改配置文件

因为使用了"react-app-rewired", 所以, 我们需要修改 package.json 中的 scripts 属性中的值, 将其中的"react-scripts"统一修改成"react-app-rewired"。

运行项目

运行项目, 确认以上的修改正确无误。

修正因为别名造成的自动完成路径功能丢失

在项目的根目录, 新建一个 jsconfig.json 文件, 内容如下

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@pages/*": ["src/pages/*"],
      "@assets/*": ["src/assets/*"],
      "@utils/*": ["src/common/*"],
      "@actions/*": ["src/actions/*"],
      "@reducer/*": ["src/reducer/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

调整你的项目文件夹

当上面的内容修改完成, 调整你的文档结构如下图所示