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

一身转战三千里,一剑曾百万师。这篇文章主要讲述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箭头所示。
 

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

文章图片
图1 
        ②打包过后cssjs文件都存在后缀 .map 的文件,使压缩后的文件过大:
          解决办法:在node_modules文件夹里的react-scripts 里找到webpack.config.prod.js文件,将devtool改为false即可,如图2所示。
 
react 脚手架create-react-app快速配置开发中常见问题,配合antd按需加载

文章图片
图23、安装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"
  }
 
react 脚手架create-react-app快速配置开发中常见问题,配合antd按需加载

文章图片
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({
【react 脚手架create-react-app快速配置开发中常见问题,配合antd按需加载】        modifyVars: { "@primary-color": "#1DA57A" },
        javascriptEnabled: true,
    })(config, env);
    return config;
};
 
react 脚手架create-react-app快速配置开发中常见问题,配合antd按需加载

文章图片


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

    推荐阅读