ZHANGYU.dev

October 14, 2023

Create React App v3 学习笔记

React2.1 min to read

不知不觉中,Create React App已经从v1到了v3,今天又再一次阅读了文档,将一些常用的配置记录下来

创建App

npx

npx create-react-app my-app

npm

npm init react-app my-app

npm版本大于6可用

yarn

yarn create react-app my-app

template

新版Create React App提供了--template [template-name]的命令行选项

如果没有选择template,会使用默认template创建

template会被命名为cra-template-[template-name],但是你只需要在命令行输入[template-name]

你可以在npm搜索"cra-template-*"找到这些包

比如创建Typescript的应用,只需要在命令行添加--template typescript

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

选择包管理器

CLI默认会选择yarn作为包管理工具,如果你想使用npm,你可以在命令行添加--use-npm,如:

npx create-react-app my-app --use-npm

自动格式化代码

添加git钩子来使用prettier格式化代码

npm install --save husky lint-staged prettier

也可以使用yarn

yarn add husky lint-staged prettier

添加下列字段到package.json

+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }

接下来添加lint-staged字段到package.json

"dependencies": {
    // ...
  },
+ "lint-staged": {
+   "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+     "prettier --write",
+     "git add"
+   ]
+ },
  "scripts": {

现在每当你提交代码时,prettier会自动格式化代码

添加自定义环境变量

添加.env文件,在这个文件里定义的变量是自定义变量

自定义变量必须以REACT_APP_开头,如

REACT_APP_SITE_NAME=网站

在代码中可以使用process.env.REACT_APP_SITE_NAME来使用

public/index.html文件中使用自定义变量

<title>%REACT_APP_SITE_NAME`%</title>

更多参考dotenv文档

添加Sass的支持

npm install node-sass --save
# or
yarn add node-sass

引入sass文件的时候可以通过添加SASS_PATH来使用绝对路径引入

如果你设置了SASS_PATH=node_modules:src,可以像一下方式import

@import 'styles/colors'; // 从src/styles引入
@import 'nprogress/nprogress'; // 从node_module引入

CSS Modules

约定名字为[name].module.css或者使用sass后名为[name].module.scss or [name].module.sass的文件为CSS Modules文件

在开发环境使用HTTPS

如果接口是https的,代理是http就发不过去,好在Create React App提供了这个功能(虽然chrome会提示不安全)

修改package.json中的npm start脚本

{
  "start": "HTTPS=true react-scripts start"
}

或者添加HTTPS=true.env文件

绝对路径的组件引入

因为没有webpackalias的配置,所以引入很麻烦,比如../../../Components/

现在可以在jsconfig.json或者tsconfig.json中添加配置来解决这个问题

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

如果使用Typescript,就在tsconfig.json文件中配置

现在,就可以使用绝对路径引入了

import Button from 'components/Button';