一身转战三千里,一剑曾百万师。这篇文章主要讲述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所示。
文章图片
图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"
}
文章图片
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;
};
文章图片
作者:热心程序猿黄帅哥
链接:https://www.jianshu.com/p/a8968001b86a
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
推荐阅读
- 车载TBOX标准-用于和后台系统/手机APP通信,实现手机APP车辆控制
- 再谈如何将android studio项目转换成eclipse
- android6,0申请权限
- Android 更改userdata的大小
- 本教程教你win764位系统
- 本教程教你电脑蓝屏怎样办
- 本教程教你win7如何激活
- 本教程教你win10改win7
- 本教程教你32位win7系统安装