这篇博客纯属个人配置，如果你也使用相同技术进行开发，那么这篇博客适合给你安装环境用。

技术工具清单

node
yarn
create-react-app
css reset
styled-components
react-Router
typescript
dart-scss

配置准备

安装yarn

mac

brew install yarn

如果你还未安装 Node.js，Homebrew 会自动为你安装。

windows

看这个文档

将yarn镜像改成taobao镜像提升速度

yarn config set registry https://registry.npm.taobao.org/

react脚手架

全局安装create-react-app

yarn global add create-react-app

基于typescript新建一个叫xxx文件名的脚手架

create-react-app xxx(fileName) --template typescript

安装完脚手架记得在.gitignore中增加/.vscode 和/.idea防止git提交IDE配置内容如果不小心提交了就运行下面命令从git里面删除这些缓存

git rm -rf --cached .idea
git rm -rf --cached .vscode

@import引入src目录下的文件

如果是引入css类文件，直接使用@import 'xxx'就行

如果要引入JS文件，那么需要在config.json上添加base路径

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

然后就可以使用import 'xxx/xxx'了

dart-sass

yarn add node-sass@npm:dart-sass

上面这段代码能够使用dart-sass代替node-sass被react编译。因为node-sass编译慢、下载速度也慢，所以使用dart-sass来替代，但是 react不支持dart-sass的下载，所以npm的新功能package alias来进行替代。

normalize

在 index.scss 添加

@import-normalize

styled-components

安装

yarn add styled-components

如果想使用typescript就执行下面代码加一句声明

yarn add --dev @types/styled-components

引入

import styled from "styled-components"

vscode推荐一个插件 vscode-styled-components 写styled-components很方便

安装react-router

普通安装

yarn add react-router-dom

声明typescript

yarn add --dev @types/react-router-dom

引入BrowserRouter

import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'

如果vscode有下载插件那么就就可以使用插件快捷键我用的插件快捷键为 imrr

nodejs 环境使用 typescript

package.json

  "scripts": {
    "start": "ts-node-dev --respawn --transpile-only app.ts",
    "build": "tsc"
  },
  "devDependencies": {
    "@types/koa-bodyparser": "^4.3.2",
    "@types/koa-router": "^7.4.4",
    "@types/node": "^16.4.10",
    "@types/require-directory": "^2.1.2",
    "ts-node-dev": "^1.1.8",
    "typescript": "^4.3.5"
  },
  "dependencies": {
    "koa": "^2.13.1",
    "koa-bodyparser": "^4.3.0",
    "koa-router": "^10.0.0",
    "require-directory": "^2.1.1"
  }

最后

没什么要跟大家说的，债见！

【一劳永逸】typescript写react项目配置环境