React-create-app不eject配置项目

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]',
  // }),
  addLessLoader({
    lessOptions:{
      javascriptEnabled: true,
      // modifyVars: { '@primary-color': '#25b864' },
      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]',
  // }),
  addLessLoader({
    lessOptions:{
      javascriptEnabled: true,
      // modifyVars: { '@primary-color': '#25b864' },
      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(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