react+typescript+antd 项目实战(1)

前言

本文主要记录在开发react+typescript+antd项目过程中遇到的问题，踩过的坑，希望对看到的同学有一些帮助。由于是第一次使用react做项目，有些理解错误和描述不对的地方，希望大家能够指出。同时这也是我第一次写这种博客性质的东西，不当的地方也请大家告诉我，万分感谢。

环境搭建

使用 create-react-app 一步步地创建一个 TypeScript 项目，并引入 antd。
参照antd官方文档

1、创建项目

create-react-app react-typescript-antd-demo --scripts-version=react-scripts-ts
进入项目并启动，默认端口是3000
cd react-typescript-antd-demo
yarn start
此时浏览器会访问 http://localhost:3000/ ，看到以下界面就算成功了。

image

2、引入antd

yarn add antd

3、高级配置

使用react-app-rewired（一个对 create-react-app 进行自定义配置的社区解决方案）
yarn add react-app-rewired@1.6.2 --dev
注：react-app-rewired@2.0.1的版本获取react-scripts-ts配置路径报错
修改 package.json 里的启动配置

  "scripts": {
    "start": "react-app-rewired start --scripts-version react-scripts-ts",
    "build": "react-app-rewired build --scripts-version react-scripts-ts",
    "test": "react-app-rewired test --env=jsdom --scripts-version react-scripts-ts",
    "eject": "react-scripts-ts eject"
  },

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

使用 ts-import-plugin（一个用于按需加载组件代码和样式的 TypeScript 插件）
yarn add ts-import-plugin --dev
修改 config-overrides.js 文件

/* config-overrides.js */
const tsImportPluginFactory = require('ts-import-plugin')
const { getLoader } = require("react-app-rewired");

module.exports = function override(config, env) {
  const tsLoader = getLoader(
    config.module.rules,
    rule =>
      rule.loader &&
      typeof rule.loader === 'string' &&
      rule.loader.includes('ts-loader')
  );

  tsLoader.options = {
    getCustomTransformers: () => ({
      before: [ tsImportPluginFactory({
        libraryDirectory: 'es',
        libraryName: 'antd',
        style: 'css',
      }) ]
    })
  };

  return config;
}

使用 react-app-rewire-less 自定义主题
yarn add react-app-rewire-less --dev
修改 config-overrides.js 文件

const tsImportPluginFactory = require('ts-import-plugin')
const { getLoader } = require("react-app-rewired");
const rewireLess = require('react-app-rewire-less');

module.exports = function override(config, env) {
    const tsLoader = getLoader(
        config.module.rules,
        rule =>
            rule.loader &&
            typeof rule.loader === 'string' &&
            rule.loader.includes('ts-loader')
    );

    tsLoader.options = {
        getCustomTransformers: () => ({
            before: [ tsImportPluginFactory({
                libraryDirectory: 'es',
                libraryName: 'antd',
                style: true,
            }) ]
        })
    };

    config = rewireLess.withLoaderOptions({
        javascriptEnabled: true,
        modifyVars: {
            "@primary-color": "#1DA57A", // 主题色
        },
    })(config, env);

    return config;
};

运行 yarn eject 命令将所有内建的配置暴露出来（不可逆，谨慎操作）
注：运行yarn eject只有可能会出现依赖包丢失的情况，我遇到的是react-scripts-ts丢失，需要根据具体报错信息解决

项目地址：https://github.com/kaichen87/react-typescript-antd-demo