项目初始化

107 阅读1分钟

项目初始化

我是用yarn初始化项目的,由于国情的原因,大家都懂得的,所以采用了某宝的景象加速(基本的环境,我就不带着大家配置了)。

视频教程地址

image.png

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的版本等信息。