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]',
  })
);

▲ 本地開發跨域添加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