TypeScript徹底解讀(26課時)_1.TypeScript徹底解讀-開發環境搭建

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的文件的話，通常就是這麼寫的

import XX from './index.js'

可是咱們配置了extensions裏面的.js這麼個配置，那麼這裏咱們在import的時候，就能夠把後綴.js省略掉

import XX from './index'

它會自動的去找同級別下的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

 

 

 

 

 開發環境配置好了

本地運行和打包也配合好了