create-react-app4.x搭建react开发框架(React17+antd4.x+typescript4.x)

1. 框架初始化

`npm install create-react-app@4.0.1 -g`
`create-react-app app --template typescript`

2. 支持自定义配置

• 添加craco.config.js，支持less样式，内容如下：

const CracoLessPlugin = require('craco-less');

module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: {
                            '@primary-color': '#1DA57A'
                        },
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
};

• 安装@craco/craco、craco-less、cross-env、babel-plugin-import
• package.json中更换 "scripts"的内容

    "a": "npm install --registry https://registry.npm.taobao.org",
    "start": "node --max-old-space-size=6000 node_modules/cross-env/src/bin/cross-env.js PORT=8888 craco start",
    "build": "rimraf ./build && cross-env GENERATE_SOURCEMAP=false craco build",

3. 支持代理

• 方式一：

  • 安装http-proxy-middleware
  • 添加setupProxy.js,内容如下：

    const proxy = require('http-proxy-middleware');
    module.exports = function (app) {
    app.use([proxy('/api/', {
        target: 'http://xx.xx.xx.xx:5004',
        changeOrigin: true,
            secure: false,
        }), proxy('/dist/xxx/', {
            target: 'http://xx.xx.xx.xx:5004',
            changeOrigin: true,
            secure: false,
        })]);
    };

• 方式二：

module.exports = {
 devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => {
       "/api/": { 
       		target: '"https://127.0.0.1"', 
       		secure: false, 
       		changeOrigin: true, }
        	console.log(devServerConfig.proxy);
        return devServerConfig;
    },
}

4. 支持IE11

• package.json中browserslist配置项中production和development下添加ie > 9,

• 安装babel-polyfill、core-js、react-app-polyfill

5. 支持webpack
配置项参考craco

module.exports = {
    webpack: {
 		 configure: (config) => {
            const markdown = {
                test: /\.md$/,
                use: [
                    {
                        loader: require.resolve("html-loader")
                    },
                    {
                        loader: require.resolve('markdown-loader'),
                    }]
            }
            config.module.rules[1].oneOf.unshift(markdown)
            //移除cesium警告
            config.module.unknownContextCritical = false
            config.module.unknownContextRegExp = /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/
            config.externals = [{
                'cesium': 'Cesium',
            },]
            return config
        }
    }
};

6. 引入antd

• npm install antd@4.9.4 --registry https://registry.npm.taobao.org

7. 依赖安装

`npm run a`

8. 项目启动
npm start

9. 注意事项

• 如出现“Cannot use JSX unless the ‘–jsx’ flag is provided.ts(17004)”，请修改.vscode文件夹下的setting.json内容如下：

{
    "typescript.tsdk": "node_modules\\typescript\\lib"
}

• 如出现“If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your”，在项目中创建一个 .env 的文件，里面写上 SKIP_PREFLIGHT_CHECK=true
• 如出现“Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory”
  方案一：
  • 打开cmd窗口
  • 运行 setx NODE_OPTIONS --max_old_space_size=10240
  • 关闭所有cmd /代码编辑器
  • 重新打开cmd并再次运行节点命令（npm等）
    方案二
  • package.json中添加

 	 {
 	 加node --max_old_space_size=4096  node_modules/react-app-rewired/bin/index.js  build
 	 }

• 安装react初始化项目报错 ：无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\create-react-app.ps1，因为在此系统上禁止运行
  Windows PowerShell 并且以右键管理员身份运行
  打开了命令行之后,输入set-ExecutionPolicy RemoteSigned，并且把权限改权限为A，然后通过 get-ExecutionPolicy 查看当前的状态：