webpack从0开始搭建react的ts开发环境（1）

本章主要介绍开发环境的各种版本

node v12.13.1
npm v6.12.1

必要的包 yarn1.19.1

我们要一步到位，做个可支持前后端分离，自带server的前端工程，那么这个工程最基本的，就是要有服务

1.选用node做前端服务器，前端http库选用koa

yarn add koa koa-router koa-send

package.json 中有 dependencies devDependencies
线上环境最终需要的是html+js+css三种文件以及一个http服务
那么 koa系和最终打包生成的 就是生产依赖

2.webpack

// "webpack": "^4.41.5",
//    "webpack-cli": "^3.3.10"
yarn add webpack webpack-cli --dev

我们生产环境需要webpack吗？必然是不需要的，所以是开发依赖

3. react

// "react": "^16.12.0",
// "react-dom": "^16.12.0",
yarn add react react-dom --dev

我们生产环境需要react吗？生产环境只认js，不管是jquery ，react，vue还是其他的，统统不认，只认js，所以是开发依赖

4.typescript

// 本系列没有tslint相关，需要的自行谷歌
yarn add  typescript  tslint  --dev

需要ts支持，依赖同上

第一期结束

package.json的样子

{
  "dependencies": {
    "koa": "^2.11.0",
    "koa-router": "^8.0.6",
    "koa-send": "^5.0.0"
  },
  "devDependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "tslint": "^6.0.0",
    "typescript": "^3.7.5",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}

webpack从0开始搭建react的ts开发环境（2）