React-create-app without eject
? 项目参考: 文章中用到的配置可参考 https://github.com/zlinggnilz/react-multi-level-form
? 具体操作如下 :
▲ 安装 create-react-app
npm install -g create-react-app
▲ 使用 create-react-app 创建项目
使用 npm 命令:
npm init react-app my-app
或使用 yarn 命令
yarn create react-app my-app
▲ 安装 react-app-rewired 和 customize-cra, 用于自定义配置
cd my-app
npm install react-app-rewired customize-cra --save-dev
▲ package.json中修改 start, build, test 配置
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test" }
▲ 安装 Ant-Design
npm install antd --save
▲ 安装less loader
npm install less less-loader --save-dev
▲ 安装 babel-plugin-import 用于按需加载组件代码和样式
npm install babel-plugin-import --save-dev
▲ 项目根目录添加 config-overrides.js 文件,用于修改默认配置
目前用到的配置大致如下:使用装饰器, 别名, 按需引入, less-loader配置
(说明: *.less 不使用css module , *.module.less 使用css module)
const { override, fixBabelImports, addDecoratorsLegacy, addLessLoader, addWebpackAlias } = require('customize-cra'); const path = require('path'); module.exports = override( addDecoratorsLegacy(), addWebpackAlias({ '@': path.resolve(__dirname, 'src/'), }), fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }), addLessLoader({ javascriptEnabled: true, // modifyVars: { '@primary-color': '#25b864' }, // 修改antd theme localIdentName: '[path][name]-[local]', }) );
▲ 本地开发跨域添加Proxy,安装 http-proxy-middleware
npm install http-proxy-middleware --save-dev
▲ 添加 src/setupProxy.js 文件, 不需要另外引入到项目
const proxy = require('http-proxy-middleware'); module.exports = function(app) { app.use(proxy('/api', { target: 'http://localhost:5000/' })); };
▲ 安装 hot loader, 用于热更新
npm install react-hot-loader --save
npm install react-app-rewire-hot-loader --save
▲ 修改 config-overrides.js 文件, 加入hot loader配置
const { override, fixBabelImports, addDecoratorsLegacy, addLessLoader, addWebpackAlias } = require('customize-cra'); const rewireReactHotLoader = require('react-app-rewire-hot-loader'); const path = require('path'); module.exports = override( addDecoratorsLegacy(), addWebpackAlias({ '@': path.resolve(__dirname, 'src/'), }), fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }), addLessLoader({ javascriptEnabled: true, // modifyVars: { '@primary-color': '#25b864' }, // 修改antd theme localIdentName: '[path][name]-[local]', }), (config, env) => { config = rewireReactHotLoader(config, env); return config; } );
▲ 修改App.js文件
加入:
import { hot } from 'react-hot-loader';
export defalt App 改为:
export default (process.env.NODE_ENV === 'development' ? hot(module)(App) : App);
▲ 如果build不需要sourcemap,修改package中scripts里的build
"build": "GENERATE_SOURCEMAP=false react-app-rewired build"
▲ 正常启动项目即可
npm start
? 文档参考 :
- create-react-app https://facebook.github.io/create-react-app/docs/getting-started
- customize-cra https://github.com/arackaf/customize-cra#readme
文档不是很详细,也可以查看源码文件中的方法。 - ant-design在create-react-app中使用 https://ant.design/docs/react/use-with-create-react-app-cn
可以实现基本需求,包含:按需引入,加入Less - 本地开发跨域添加Proxy, create-react-app官网: https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development
- http-proxy-middleware https://github.com/chimurai/http-proxy-middleware
- react-hot-loader https://github.com/gaearon/react-hot-loader
- react-hot-loader without eject [react-app-rewire-hot-loader] https://github.com/cdharris/react-app-rewire-hot-loader