package.json

{
  "name": "XXX",
  "version": "3.14.15",
  "private": true,
  "proxy":"http://api.tyio.net",
  "homepage": ".",
  "dependencies": {
    "axios": "latest",
    "lodash": "latest",
    "react": "next",
    "react-dom": "next",
    "react-scripts": "latest",
    "react-table": "latest"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "@types/axios": "latest",
    "@types/lodash": "latest",
    "@types/react": "latest",
    "@types/react-dom": "latest"
  },
  ...

大部分都用 latest,或许太激进了,😊。

如果设置了 proxy 字段,dev-server 伺服文件时,如果没有找到对应的路径,则使用配置的这个后端去处理请求,常用于动态 API 接口。

用这个配置,可以简化并统一管理 url,避免开发阶段调用 API 时出现的跨域现象。

DANGEROUSLY_DISABLE_HOST_CHECK

开发环境中,webpack-dev-server 不允许 localhost 之外的访问方式,设置这个环境变量即可解除。

# UNIX sh
export DANGEROUSLY_DISABLE_HOST_CHECK=true

# Windows cmd
set DANGEROUSLY_DISABLE_HOST_CHECK=true

参考:node_modules/react-scripts/config/webpackDevServer.config.js

GENERATE_SOURCEMAP

export GENERATE_SOURCEMAP=false

or package.json

  "scripts": {
    "start": "DANGEROUSLY_DISABLE_HOST_CHECK=true react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    ...
    
  }