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②打包过后css\js文件都存在后缀 .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({
modifyVars: { "@primary-color": "#1DA57A" },
javascriptEnabled: true,
})(config, env);
return config;
};
新建文件配置
网友评论