1.TypeScript完全解讀-開發環境搭建
初始化項目
手動創建文件夾
D:\MyDemos\tsDemo\client-demo
用VSCode打開
npm init:初始化項目
然后我們的項目根目錄就多了個package.json的文件
創建相關目錄文件夾
untils:業務相關的，可服用的方法
assets：主要放靜態資源
img：圖片
font：字體文件
tools:業務無關的純工具的函數
api：把一些可以復用的接口請求的方法，放在api文件夾下
config：一般放配置文件，把一些可能會修改的配置，抽離出來放在這里
src同比別的文件夾typings：存放ts的聲明文件
build:項目打包上線的一些配置，或者我們本地開發時，本地服務的一些配置，一般就放我們的webpack配置
文件夾建好以后，安裝我們ts的依賴
把typescript和tslint安裝在全局
tslint和eslint都是對代碼風格監測的工具。tslint是專注於ts的
我們把它們安裝在全局，所以后要交一個 -g
npm install typescript tsint -g
安裝完成后，使用：tsc --init來初始化我們ts的配置
我們客戶看到 里面有很多的注釋文件
這是ts在1.8的版本以后，支持可以在config內寫注釋
添加webpack
這里是用webpack4，4最大的亮點就是盡可能少的讓我們去配置
首先需要在項目中安裝webpack
npm install webpack
安裝為開發依賴 -D
少安裝了依賴，根據視頻中的再操作一遍
npm install webpack webpack-cli webpack-dev-server -D
安裝完成后，我們需要寫一個webpack的配置文件，在build文件夾下創建webpack.config.js文件
package.json內的scripts節點 ，都可以用npm run去調用。例如這里現在配置的是test
我們添加一個運行的執行 start,其他的指令必須前面應npm run 去調用，例如這個test的指令，調用就是:npm run test
但是這個start指令呢，我們直接使用：npm start就可以了。start的配置，我們待會再看。
webpack的配置
webpack是運行在node環境下的。只在你編譯的時候運行。
我們使用node的module導出一個模塊
entry是入口文件，指定了src目錄下的index.ts文件
把這個文件做為入口文件，那么我們在本地開發和打包的時候，他都會從這個文件開始，逐漸的往里面添加依賴什么的
然后我們在src下創建index.ts文件，里面的內容呢，我們先不用管
output:項目變異完的輸出文件
filename：我們變異完后的文件叫做什么,ts編譯完后都是js文件
resolve:
extensions是一個數組
例如上面我們配置了extensions里面有個.js的文件，在src的目錄下有一個index.js的文件，我們在index.ts內要引入這個同級別的index.js的文件的話，一般就是這么寫的
但是我們配置了extensions里面的.js這么個配置，那么這里我們在import的時候，就可以把后綴.js省略掉
它會自動的去找同級別下的index開頭的這么個文件
那么我們這里是開發ts，所以自然也要個添加對ts的支持
這里配置了.ts和.tsx這兩種，
tsx里面就是寫一些jsx的語法
module配置項
rules:配置依稀對於制定文件的處理的loader之類的東西
這個正則表達式匹配的后綴為ts或者tsx的文件
use：就是表示使用ts-loader來處理ts和tsx格式的文件
那么既然我們配置上了ts-loader。我們就需要使用npm進行安裝
npm install ts-loader -D
-D表示 開發依賴
還要制定exculde來排除node_modules文件夾下的文件，這樣在編譯的時候就不會去編譯node_modules文件夾下的文件了。
source-map
開發的時候為了方便調試代碼，是需要source-map
調試的時候方便定位你代碼的一個東西。這里我們使用inline-source-map
開發的時候我們是需要source-map。但是實際打包上線是不需要的，不需要source-map會增加的編譯速度和打包速度，減少一些資源的空間浪費
所以我們這里需要判斷下當前是在本地開發環境還是上線打包
這個NODE_ENV需要在哪里傳進來呢?在我們的命令里面。我們這先留空，待會需要用到一個工具，待會再來介紹
通過：process.env.NODE_ENV === 'production'來判斷是否是生產環境
NODE_ENV參數的傳入
在啟動的指令這里，我們需要用到webpack-dev-server,就是一個我們用於本地開發的一個服務器
如何啟動並且應用這些配置呢？
webpack-dev-server：這是啟動命令
--config：通過config參數來指定我們webpack的配置文件
那么我們就制定build文件夾下的webpack.config.js文件。
這樣我們就指定了，webpack-dev-server去build文件夾去讀取我們webpack的配置文件。
傳入參數。借助工具：cross-env 后面指定了 NODE_ENV的值是開發環境development
這樣在webpack的配置文件中就可以通過process.env.NODE_ENV獲取到我們傳入的值了。
用了cross-env自然我們也需要安裝它
npm install cross-env -D
-D:表示作為開發依賴進行安裝：
這樣我們的本地開發指令就寫好了，本地開發利用webpack-dev-server它有一些參數也可以配置
webpack-dev-server的參數配置
contentBase:基於哪個文件夾作為根目錄運行的，這里我們配置為根目錄的dist文件夾
stats:
webpack啟動后在控制台打印出哪些信息，我們只關注錯誤信息，這里只寫個簡單的errores-only
compress：false不啟動壓縮
host：'localhost'
port:端口制定8089
這樣本地開發服務器的配置就配置完成了
配置插件：
plugins這里用到兩個插件
npm install clean-webpack-plugin:可以清理制定的文件夾或者文件
第二個插件：
html-webpacl-plugin:指定一個編譯的html文件，后面的編譯呢會基於此html作為模板來編譯
連個插件一起安裝：
npm install clean-webpack-plugin html-webpack-plugin -D
使用者兩個插件需要先引入：
const HtmlWebpackPlugin = require('html-webpack-plugin') const CleanWebpackPlugin = require('html-webpack-plugin')
首先我們要使用的就是CleanWebpackPlugin給傳入一個對象，設置一些配置
程序build之前先清理dist打包生成的文件夾
編譯的時候制定哪個html作為模板進行編譯
src下創建template文件夾，並再創建index.html文件夾
這樣，這就是我們的模板文件了。
webpack會打包項目會生成一個dist文件。會把這個模板文件index.html和我們定義的main.js文件放到一起，並會自動在index.html模板里面引入main.js和這個文件
項目中安裝ts的依賴
剛才我們是全局中安裝的ts，我們在我們的項目中也要添加依賴
npm install typescript
糾正錯誤：
配置文件寫錯了多個地方
運行start指令
http://localhost:8089/
有熱更新，修改后會自動刷新頁面
在src/index.ts內簡單的定義一個number類型的變量
配置打包環境：
添加新的指令build
通過cross-env傳入參數 NODE_ENV=production表示生產環境，我們調用命令webpack ，然后通過--config 指定配置文件路路徑
因為build傳入的production生產環境，所以打包的時候就不會產生source-map
npm run build 進行打包
main.js文件是經過壓縮的
在index.ts編寫代碼修改頁面的title
開發環境配置好了
本地運行和打包也配合好了