資源

項目目錄

├── dist # 打包結果目錄│  ├── demo1 //類別demo1的打包結果│  │  ├── demo1.himl│  │  ├── demo1.js│  │  └── demo1.css│  └── demo2 ... //類別demo2的打包結果├── src # 業務資源文件目錄│  ├── category //項目分類│  │  ├── demo1│  │  ├── demo2│  │  └── ...│  ├── components //公共組件│  ├── util //公共資源│  └── custom.d.ts //項目全局變量聲明文件├── index.html //項目啟動入口├── .gitignore //git忽略文件├── .eslintrc.js //eslint校驗配置├── package.json //依賴包├── tsconfig.json //ts配置├── webpack.config.build.js //webpack打包├── webpack.config.base.js //webpack基礎配置└── webpack.config.js //項目啟動配置

前言

對于復雜或多人開發的 React 項目來說，管理和使用每個組件的 props 、 state 或許會成為一件讓人頭痛的事情，而為每一個組件寫文檔，成本也會比較大，對項目的開發效率也不是最理想的。

Typescript 給 React 帶來很多好處：

需求

要搭建一個React+TypeScript+webpack的項目的話，一般都是團隊開發多人多文件項目，在搭建之前需要優先考慮以下幾個方面：

安裝

前置安裝

首先需要全局安裝typescript，這里默認大家都已經安裝了node以及npm

npm install -g typescript

首先新建文件夾并進入

mkdir tsDemo && cd tsDemo

然后進行初始化，生成package.json和tsconfig.json

npm init -y && tsc --init

安裝開發工具

npm install-D webpack webpack-cli webpack-dev-server

安裝react相關

因為需要整合ts，而react原本的包是不包含驗證包的，所以這里也需要安裝相關ts驗證包

npm install -S react react-domnpm install -D @types/react @types/react-dom

安裝ts-loader

npm install -D ts-loader

以上是基本的 后續會貼出項目demo里面包含所有依賴包

webpack配置

添加webpack文件

根目錄下新建webpack.config.base.js、webpack.config.build.js、webpack.config.js文件