zero-react-scripts

简介

本包只适用于zero-react-pc、zero-main两个项目使用

如使用react + redux + less可做参考

安装

yarn add zero-react-scripts

更新包

yarn upgrade zero-react-scripts@1.*.*
yarn upgrade zero-react-scripts --latest

开发

yarn start

打包

yarn build:uat
yarn build:pre
yarn build:prod

开发前置准备

1. 环境介绍：

• local 本地开发
• uat 测试环境
• pre 堡垒环境
• prod 生产环境

2. 在package.json中添加 scripts，配置：

{
  "scripts": {
    "start": "zero-react-scripts start env=local",
    "build:uat": "zero-react-scripts build env=uat",
    "build:pre": "zero-react-scripts build env=pre",
    "build:prod": "zero-react-scripts build env=prod"
  }
}

3. 根目录添加文件夹env，文件加重添加如下 4 个js文件

• env/env.com.js
• env/env.local.js
• env/env.uat.js
• env/env.pre.js
• env/env.prod.js

env.com.js为公共业务参数配置文件，其余为各个环境差异性配置

文件格式如下：

{
  "ENV": "prod"
}

必要参数配置：

• ENV 环境标识
• appName 为路由前缀
• appCode 项目唯一标识

项目中使用方式为：

const env = process.env.ENV;

4. 项目跟目录添加jsconfing.json，主要用于vscode识别短路径，webpack打包会根据compilerOptions.paths中的配置转换为alias

处理 alias 转跳问题

{
  "compilerOptions": {
    "checkJs": false,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "@/assets/*": ["assets/*"],
      "@/src/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

5. 依赖包，出去打包需要的一些依赖包，此次打包还进行了dll的优化，能在进行业务打包时候跳过这些包的编译，提高打包速度，但对应的文件会在项目启动时候优先加载，进行dll打包如下：

• reactvendors
  • react
  • react-dom
  • react-router-dom
• reduxvendors
  • react-redux
  • react-router-redux
  • redux
  • redux-actions
  • redux-batched-actions
  • redux-persist
  • redux-saga
  • redux-thunk
  • reselect

其他常用命令介绍

yarn upgrade --latest

npm publish --tag=beta