create-react-app + antd 后台管理项目创建详细步骤

Posted 2023-05-11

参考技术A (1) 全局引入(打包后比较大，建议按需引入):

(2) 按需加载（3种方法）：

react 脚手架create-react-app快速配置开发中常见问题，配合antd按需加载

1、创建脚手架 create-react-app：

    ①命令行执行：npm install -g create-react-app 安装脚手架工具；

    ②命令行执行： create-react-app xxx  执行创建一个新的项目(xxx为项目根目录名称)；

    ③ 命令行执行： cd xxx  跳转到刚刚创建的项目目录下；

    ④命令行执行： npm start  开启热加载 在localhost：3000中运行本地开发环境；

    ⑤命令行执行： npm run build  启动内置已配好的webpack压缩js、jsx、less、css等文件启动线上环境。（该步骤在本地测试开发环境完成后）。

2、中间可能会遇到的问题：

    ①线上环境路径出现错误： 

    解决办法：在package.json中加上"homepage": "."，如图1箭头所示。

 

图1

 

    ②打包过后cssjs文件都存在后缀 .map 的文件，使压缩后的文件过大：

     解决办法：在node_modules文件夹里的react-scripts 里找到webpack.config.prod.js文件，将devtool改为false即可，如图2所示。

 

图2

3、安装antd以及按需加载所需依赖：

    npm  i    antd      react-app-rewired   react-app-rewire-less  babel-plugin-import ;

                组件包           更改启动               使用less                        组件按需加载

    修改package.json  如图：

"scripts": {

    "start": "react-app-rewired start",

    "build": "react-app-rewired build",

    "test": "react-app-rewired test --env=jsdom",

    "eject": "react-scripts eject"

  }

 

package.json

在根目录下创建  config-overrides.js 文件 ，内容如下：

const { injectBabelPlugin } = require(‘react-app-rewired‘);

const rewireLess = require(‘react-app-rewire-less‘);

module.exports = function override(config, env) {

    config = injectBabelPlugin(

        [‘import‘, { libraryName: ‘antd‘, libraryDirectory: ‘es‘, style: true }], // change importing css to less

        config,

    );

    config = rewireLess.withLoaderOptions({

        modifyVars: { "@primary-color": "#1DA57A" },

        javascriptEnabled: true,

    })(config, env);

    return config;

};

 

作者：热心程序猿黄帅哥
链接：https://www.jianshu.com/p/a8968001b86a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。