Create-react-app + react-app-rewired + typescript + antd 使用Create-react-app、react-app-rewired、typescript和antd进行开发。

Question

我正在尝试启动一个项目，但遇到了问题。 有人成功地将 Create-react-app + react-app-rewired + typescript + antd 结合使用吗？我尝试了所有可用的教程/自定义脚本/加载器，但没有运气。 我以为https://github.com/SZzzzz/react-scripts-ts-antd将是解决我的所有问题的答案，但出现编译错误：

(28,81): 类型 '{ className: string; style: { transition: string | boolean; msTransform: string; WebkitTransform:...' 不能满足约束条件 'HTMLAttributes<HTMLElement>'。 属性'style'的类型不兼容。 类型'{transition:string | boolean；msTransform：string;WebkitTransform：string;transform：string;}' 不能赋值给类型'CSSProperties | undefined'。 类型'{transition:string | boolean；msTransform：string;WebkitTransform：string;transform：string;}' 不能赋值给类型'CSSProperties'。 属性'transition'的类型不兼容。 类型'string | boolean' 不能赋值给类型'string | undefined'。 类型 'true' 不能赋值给类型 'string | undefined'。

- rissk13

Answer 1

初始化

    create-react-app my-app --scripts-version=react-scripts-ts
    cd my-app
    yarn add antd 
    yarn add react-app-rewired ts-import-plugin --dev

添加 config-overrides.js

    const {
        getLoader,
        injectBabelPlugin
    } = require("react-app-rewired");
    const tsImportPluginFactory = require('ts-import-plugin')
module.exports = function override(config, env) {
        // 处理 webpack 配置...
        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;
    };

更新 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"
  },

- DasonCheng