react-create-app

github地址

配置文档

环境变量

λ yarn add classnames lodash @material-ui/core react-router-dom mobx mobx-react rxjs
λ yarn add babel-plugin-react-html-attrs  @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties babel-plugin-import --dev

创建tsx

λ npx create-react-app my-app --template typescript

yarn create react-app my-app

// or

npx create-react-app my-app
yarn run eject // 显示所有配置文件

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      ["@babel/plugin-proposal-decorators", {
        // "decoratorsBeforeExport": true
        "legacy": true
      }],
      ["@babel/plugin-proposal-class-properties", {
        // "decoratorsBeforeExport": true
        "loose": true
      }],
      ["import", {
        "libraryName": "@material-ui/core",
        "libraryDirectory": "",
        "camel2DashComponentName": false
      }, "@material-ui/core"],
      ["import", {
        "libraryName": "lodash",
        "libraryDirectory": "",
        "camel2DashComponentName": false
      }, "lodash"]
    ]
  },

修改打包路径base url

修改路径的 alias

//    config/webpack.config.dev.js 和 config/webpack.config.prod.js 大概92行

    alias: {
      '@': path.resolve(__dirname, '../src'),
      // Support React Native Web
      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
      'react-native': 'react-native-web',
    },

// 使用
import store from '@/store'

package.json -> proxy

  "proxy":"http://localhost:5000"

  let { data } = await axios.get("/users");  // http://localhost:5000/users

多个 proxy

yarn add http-proxy-middleware

// src/setupProxy.js
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
      app.use(proxy("/api", { targe: "http://localhost:5000" }) // axios('/api/hello')  => http://localhost:5000/api/hello
      app.use(proxy("/yii", { targe: "http://localhost:5001" })  // axios('/yii/hello')  => http://localhost:5001/yii/hello
};

删除.map文件

// scripts/build.js
process.env.GENERATE_SOURCEMAP = false;

polyfill

开启兼容 ie11

yarn add react-app-polyfill

// src/index.js
import 'react-app-polyfill/ie11';

打包优化 babel-minify

npm install babel-minify-webpack-plugin --save-dev

// webpack.config.prod.js
const MinifyPlugin = require("babel-minify-webpack-plugin");
module.exports = {
  plugins: [
      new MinifyPlugin({}, { comments: false }),
  ]
}

打包优化 DllPlugin

// 先修改 webpack.config.prod.js

const config2 = [
  {
    name: "vendor",
    mode: "production",
    entry: [
      "react",
      "react-dom",
      "lodash",
      "axios",
      "classnames",
      "@material-ui/core",
      "mobx",
      "mobx-react",
      "react-router-dom",
    ],
    output: {
      path: path.resolve(__dirname, "..", "public"),
      filename: "vendor.js",
      library: "vendor_[hash]",
    },
    plugins: [
      new webpack.DllPlugin({
        context: __dirname,
        name: "vendor_[hash]",
        path: path.resolve(__dirname, "..", "public/manifest.dll.json"),
      }),
    ],
  },
  {
    name: "app",
    mode: "production",
    dependencies: ["vendor"],
    plugins: [
      new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: require("../public/manifest.dll.json"),
      }),
    ]
  }
]

module.exports = config2;

// 再修改 scripts/build.js  102行
const publicPath = config[1].output.publicPath;

// 修改 public/index.html
<script src="%PUBLIC_URL%/vendor.js"></script>

打包优化 HappyPack

webpack.config.prod.js

// webpack.config.prod.js
yarn add happypack --dev

const HappyPack = require("happypack");
const os = require("os");
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

plugins: [
    new HappyPack({
    id: "js",
    loaders: [
      {
        loader: "babel-loader",
      },
    ],
    threadPool: happyThreadPool,
    }),
]

打包优化 UglifyJsPlugin

yarn add uglifyjs-webpack-plugin --dev

// webpack.config.prod.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

  plugins: [
    new UglifyJsPlugin({
        test: /\.js($|\?)/i,
        cache: true,
      })
  ]

使用隧道代替 localhost:3000

需要在 devserver 中配置白名单

// webpackDevServer.config.js

    allowedHosts: ["a.domin.com"],