项目初始化
我是用yarn初始化项目的,由于国情的原因,大家都懂得的,所以采用了某宝的景象加速(基本的环境,我就不带着大家配置了)。
视频教程地址
yarn 中国镜像加速
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
TS 初始化项目
// yarn 方式
yarn create react-app react-ts --template=
// npx 方式
npx create-react-app react-ts --template=typescript
目录结构
执行这个命令可以查看目录机构
tree -I '*svn|node_module'>>a.log
.
├── README.md
├── build
│ ├── asset-manifest.json
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ ├── robots.txt
│ └── static
│ ├── css
│ │ ├── 2.4d98ed14.chunk.css
│ │ ├── 2.4d98ed14.chunk.css.map
│ │ ├── main.ab7136cd.chunk.css
│ │ └── main.ab7136cd.chunk.css.map
│ └── js
│ ├── 2.c48f41e7.chunk.js
│ ├── 2.c48f41e7.chunk.js.LICENSE.txt
│ ├── 2.c48f41e7.chunk.js.map
│ ├── 3.8c50224c.chunk.js
│ ├── 3.8c50224c.chunk.js.map
│ ├── main.9996b1ea.chunk.js
│ ├── main.9996b1ea.chunk.js.map
│ ├── runtime-main.c56b6e0f.js
│ └── runtime-main.c56b6e0f.js.map
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── index.css
│ ├── index.tsx
│ ├── logo.svg
│ ├── react-app-env.d.ts
│ ├── reportWebVitals.ts
│ └── setupTests.ts
├── tsconfig.json
└── yarn.lock
目录结构说明
- build为我们编译后的文件存放地点,默认这个文件是不存在的,我们需要打包的时候会自动创建,我这里为了给大家展示,所以进行了打包
- public 为公共目录,我们开发的时候,文件放在这个目录下可以公开访问
- src为我们存放逻辑代码的地方
脚本解释
正常情况下官方给的脚手架已经满足我们开发的需求
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
官方脚手架,给我们提供了四个命令
- start 我们开发阶段启动的脚本
- build 为生产环境打包
- test 进行单元测试
- eject 导出配置脚本,提供给大家定制
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^16.9.53",
"@types/react-dom": "^16.9.8",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"typescript": "^4.0.3",
"web-vitals": "^0.2.4"
}
这里是我们工程的依赖包,可以看出我们用react版本,ts的版本等信息。