react-typescript

2024年04月29日

柏拉文

越努力，越幸运

基于 Create-React-App 搭建

目标

• 通过create-react-app 脚手架搭建项目
• 项目搭建完成之后后续得相关配置

一、项目初始化

1. 创建项目

NPX

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

NPM

npm init react-app my-app --template typescript

Yarn

yarn create react-app my-app --template typescript

2. 安装依赖

NPM

npm install

Yarn

yarn install

二、管理 Webpack 配置

方案A 暴露 Webpack 配置

暴露Webpack配置: yarn run eject 、 Y

::: warning 注意

• 暴露Webpack配置之前不能修改任何文件，否则会报错
• 执行完yarn run eject 和 Y 之后，package.json 中的eject命令将会自动移除（这个毫无影响，不用关心） :::

方案缺点:

• npm run eject命名不可逆，一旦配置文件暴露后就不可再隐藏
• 扩展的配置和create-react-app内建的webpack配置混合在了一起，不利于配置出现问题后的排查

方案B 扩展 Webpack 配置

扩展Webpack配置: react-app-rewired是对create-react-app进行自定义配置的社区解决方案。它不会直接去修改create-react-app的默认配置，而是在create-react-app配置的基础上进行扩展。

方案步骤:

1. 安装react-app-rewired

yarn add react-app-rewired react-scripts -S

2. 根目录创建config-overrides.js

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}

3. 修改package.json配置

/* package.json */
"scripts": {
   "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
}