@jkyu/uc-react-scripts

React CRA 快速升级Webpack5

Usage no npm install needed!

<script type="module">
  import jkyuUcReactScripts from 'https://cdn.skypack.dev/@jkyu/uc-react-scripts';
</script>

README

Webpack5 React Scripts

👨‍🏫 描述

  • uc-react-scripts 主要解决基于create-react-app的项目，快速升级Webpack 5使用

🙋‍♂️ 快速开始

  • 初始化 CMA 项目： npx @jkyu/create-monet-app init

📦 安装

npm i -g @jkyu/create-monet-app or yarn global add @jkyu/create-monet-app

👨‍🔧 功能迭代

更新文档

👨‍💻 指令

  • uc-react-scripts info 查看当前运行环境
  • uc-react-scripts dev 调试
    • uc-react-scripts dev --env test 运行环境
    • uc-react-scripts dev --no-quiet 关闭webpack错误或警告信息
  • uc-react-scripts build 构建
    • uc-react-scripts build --env test 指定 部署环境
  • uc-react-scripts help

🧑‍💻 如何使用uc-react-scripts项目

1) 安装 react-app-rewired

$ npm install @jkyu/uc-react-scripts --save-dev

2) 在根目录中创建一个 mjd-config.js 文件

/* mjd-config.js */
module.exports = {
  custom: {}, // 根据webpack结构，对配置进行覆盖
  override: (config) => config // 根据已经生成的config，进行修改
};

+-- your-project
|   +-- mjd-config.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

3) 替换 package.json 中 scripts 执行部分

  /* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "uc-react-scripts dev",
-   "build": "react-scripts build",
+   "build": "uc-react-scripts build",
}

4) 启动 Dev Server

$ npm start

5) 构建你的应用程序

$ npm run build