正常操作，正常分析，大家好， 我是D1n910。

我為什么要學(xué)TypeScript？

我是在職的前端開(kāi)發(fā)工程師，我想要提升我的個(gè)人能力，提高代碼質(zhì)量。

目前我已經(jīng)在使用eslint來(lái)檢測(cè)我的代碼規(guī)范。我知道TypeScript是能夠有管控代碼的能力，能夠讓我編寫(xiě)出質(zhì)量高的代碼。

……

理由可能很多，但是最核心的理由是這樣的：我這個(gè)人愛(ài)【追新】。

我個(gè)人是比較喜歡追求流行的東西，因?yàn)樵谖铱磥?lái)，一件東西流行起來(lái)，應(yīng)該有它的價(jià)值所在。而且學(xué)會(huì)TypeScript看起來(lái)很酷，雖然它好像也是2015的東西了，但是看起來(lái)確實(shí)很酷的樣子。

我感覺(jué)到非常興奮，對(duì)于一件對(duì)于我來(lái)說(shuō)，是新的前端的東西，我感覺(jué)到我就是一只貓咪，一根逗貓棒（typescript）在我面前搖晃，我忍不了！

好的，開(kāi)始吧。

TypeScript完全解讀（1/26）搭建開(kāi)發(fā)環(huán)境

核心內(nèi)容

• 使用npm初始化項(xiàng)目

• 全局安裝部分依賴

• 使用tsc初始化配置

• 配置webpack

• 添加開(kāi)發(fā)和打包命令

1、使用npm初始化項(xiàng)目

注：我使用的系統(tǒng)是 mac，用的開(kāi)發(fā)工具是 vscode

?1.1、新建一個(gè)空文件夾，名稱自定義，我這邊按照視頻為 client-side

1.2、在命令行中輸入`npm init`來(lái)初始化項(xiàng)目

1.3、它會(huì)有一個(gè)交互的內(nèi)容，來(lái)輔助我們進(jìn)行配置

* 左邊文字配置名，括號(hào)是默認(rèn)配置內(nèi)容，如果你要使用默認(rèn)內(nèi)容，直接敲回車即可

如果你要的是非默認(rèn)配置的內(nèi)容，可以自行填寫(xiě)后敲回車

配置內(nèi)容為：

????? ? 【工程名稱】默認(rèn)

????????【版本號(hào)】默認(rèn)

? ? ? ? 【介紹】參考視頻，叫做ts-learning的源代碼

? ? ? ? 【入口文件】參加視頻，因?yàn)槲覀兪莟s工程，所以寫(xiě)為`./src/index.ts`

? ? ? ? 【測(cè)試指令】沒(méi)有，跳過(guò)

? ? ? ??【git倉(cāng)庫(kù)】如果你有g(shù)it倉(cāng)庫(kù)，就可以填，這邊沒(méi)填

? ? ? ??【關(guān)鍵詞】我寫(xiě)的?`typescript,source_code,d1n910`

? ? ? ??【作者】填你自己

? ? ? ? 【協(xié)議】這邊用的MIT協(xié)議

最后回車就可以看到確認(rèn)選項(xiàng)，沒(méi)問(wèn)題回車就可，看到有問(wèn)題輸入`?no `可以重寫(xiě)。?

?如此就可以新建好我們的package.json文件了

* 我們也可以直接用`npm init -y`這個(gè)命令直接生成默認(rèn)的配置 文件

1.4、創(chuàng)建基礎(chǔ)文件夾?

創(chuàng)建一個(gè)`src`文件夾，這個(gè)文件夾存放我們項(xiàng)目中的資源

在`src`文件夾下創(chuàng)建一些文件夾進(jìn)行分類

?????`utils`——存放和業(yè)務(wù)相關(guān)的代碼方法

????`tools`——存放和業(yè)務(wù)無(wú)關(guān)的純工具的函數(shù)

????`assets`——存放一些靜態(tài)資源

? ??? ??`assets/img`——圖片

? ? ? ??`assets/font`——字體文件

? ? `api`——封裝好的可以復(fù)用的請(qǐng)求文件可以放到api文件夾下

????`config`——放置配置文件

新建一個(gè)和`src`同級(jí)的文件夾`typings`，以后我們學(xué)習(xí)的內(nèi)容涉及到ts聲明的會(huì)放到`typings`文件夾下面

新建一個(gè)和`src`同級(jí)的文件夾`build`，放置我們項(xiàng)目中打包上線的一些配置，或者我們本地開(kāi)發(fā)時(shí)啟動(dòng)本地文件的配置

2、全局安裝部分依賴

2.1、在命令行輸入下面的命令進(jìn)行全局安裝

`sudo npm install typescript tslint -g` （tslint使用來(lái)代碼檢查的）

2.2、提示安裝成功后，可以輸入`tsc -v`查看版本是否能使用typescript

能夠成功，則可以使用`tsc --init`初始化我們的ts配置

成功后，會(huì)看到一個(gè) `tsconfig.json`文件的生成

里面有很多配置，可能會(huì)奇怪的是，為什么這可以有注視，是因?yàn)閠s v1.8版本里，支持了ts添加注釋。

現(xiàn)在里面會(huì)有4個(gè)是打開(kāi)的，具體每項(xiàng)配置的功能會(huì)在后面的課程中說(shuō)明。

3、添加webpack 4

3.1、介紹

webpack4相比webpack2之類的最大的亮點(diǎn)是需要配置的內(nèi)容少，幾乎零配置

運(yùn)行`npm install webpack webpack-cli webpack-dev-server -D `

安裝webpack、和webpack-cli沒(méi)毛病，安裝webpack-dev-server是因?yàn)槲覀円镜亻_(kāi)發(fā)，-D就是安裝為開(kāi)發(fā)依賴。

安裝好webpack后，為了使用，我們需要在`build`文件寫(xiě)好webpack的配置文件。

3.2、webpack配置書(shū)寫(xiě)

新建一個(gè)文件`webpack.config.js `，我們待會(huì)會(huì)在一個(gè)指令中運(yùn)行這個(gè)文件。

內(nèi)容如下

`webpack.config.js`

const HtmlWebpackPlugin = require('html-webpack-plugin')

?// V3.0.0版本的`clean-webpack-plugin`要用結(jié)構(gòu)賦值的寫(xiě)法?

//? const CleanWebpackPlugin =??require('clean-webpack-plugin')

const {?CleanWebpackPlugin }?=??require('clean-webpack-plugin')

module.exports = {

????// 入口文件，咱們也要新建一個(gè)這個(gè)文件

????entry: "./src/index.ts",?

????// 輸出文件

????output: {

????????// 編譯完之后的文件名稱 *ts文件編譯后會(huì)生成js文件

????????filename: "main.js"

????},

????resolve: {

????????// extensions能夠自動(dòng)解析文件的拓展，是數(shù)組。如果我們?cè)陧?xiàng)目中想要引入別的項(xiàng)目文件，比如我們想在index.ts中引入一個(gè)同級(jí)下的index.js文件，那么我們?cè)镜?`import xx form './index.js'`的`.js`可以不用書(shū)寫(xiě)，它會(huì)自動(dòng)在同級(jí)下找?？梢灾苯訉?xiě)為`import xx form './index'`。我們要開(kāi)發(fā)ts項(xiàng)目，所以要加`.tsx`、'.ts'

????????extensions: ['.js', '.tsx', '.ts']

???? },

? ? module: {

????????//? 這邊主要引用一些loader的東西

????????rules: [{

????????????????//?test是用以匹配文件名稱的正則表達(dá)式，這個(gè)表達(dá)式匹配的就是后綴是ts或者tsx的文件

????????????????test: /\.tsx?$/,

????????????????// 針對(duì)不同的資源，會(huì)有不同的資源加載器，這邊用的就是ts-loader，我們要使用ts-loader，就需要安裝ts-loader，在命令行中輸入`npm install ts-loader -D`

????????????????use: 'ts-loader',

????????????????// 我們還需要一個(gè)exclude，即設(shè)定不包含不用處理的文件，這也是正則表達(dá)式，這我們?cè)O(shè)定不對(duì)/node_modules/下的ts文件做處理

????????????????exclude: /node_modules/

????????}]

????},

????// 配置source-map，用來(lái)方便調(diào)試的時(shí)候定義到自己的代碼，這個(gè)是我們開(kāi)發(fā)的時(shí)候?yàn)榱朔奖阌玫模瑂ource-map有很多選項(xiàng)，這里我們用的是inline-source-map，但是我們實(shí)際生產(chǎn)環(huán)境打包上線的時(shí)候，是不需要的，如果你添加了會(huì)降低打包速度添加不必要的資源浪費(fèi)。我們可以通過(guò)一個(gè)參數(shù)進(jìn)行判斷 `process.env.NODE_ENV`，這個(gè)參數(shù)我們是在package.json進(jìn)行獲得的【詳細(xì)請(qǐng)看3.4】。

????//我們判斷是不是生產(chǎn)環(huán)境，如果不是生產(chǎn)環(huán)境才啟動(dòng)source-map配置，請(qǐng)?zhí)崆翱?.4?。?！

????devtool: process.env.NODE_ENV === 'production'?? false : 'inline-source-map',

????devServer: {

????????// 這個(gè)決定了我們的文件夾是基于哪個(gè)開(kāi)發(fā)目錄運(yùn)行的

????????contentBase: './dist',

????????// 控制我們?cè)趩?dòng)后的控制臺(tái)會(huì)打印出什么信息，這邊我們暫時(shí)只關(guān)心錯(cuò)誤的情況，所以可以用`errors-only`

????????stats: 'errors-only',

????????//? 是否啟動(dòng)壓縮

????????compress: false,

????????// 域名

????????host: 'localhost',

????????// 端口，寫(xiě)一個(gè)指定打開(kāi)的端口

????????port: 8089

????},

? ??// 用一些插件配置項(xiàng)，可以安裝這些

????//? ` clean-webpack-plugin` 清理一些指定的文件夾或者文件?`html-webpack-plugin` 指定一個(gè)html作為編譯的模版

????plugins: [

????????new?CleanWebpackPlugin({

????????????打包之前，先清理掉原來(lái)dist文件夾的內(nèi)容

????????????cleanOnceBeforeBuildPatterns:?['./dist']

????????}),

? ? ? ?//? 來(lái)指定編譯的時(shí)候要用什么html文件作為模版

???????// 新建個(gè)初始的html文件即可。webpack會(huì)把我們編譯后的main.js文件和模版文件放在一起，并且會(huì)幫我們自動(dòng)地把main.js文件引入到html文件中

????????new HtmlWebpackPlugin({

????????????template: './src/template/index.html'

????????})

????]

}

* 注意我們之前全局安裝了typescript，還需要在項(xiàng)目里安裝`npm install typescript`，因?yàn)槲覀冺?xiàng)目中還會(huì)用到typescript的依賴

3.4、package.json的書(shū)寫(xiě)

我們?cè)?.3說(shuō)了要寫(xiě)NODE_ENV，主要`package.json`的`scripts`字段下添加運(yùn)行指令

* 這邊添加的命令用在命令行中用?npm run拼命令名稱即可跑

* 現(xiàn)在test的提示有問(wèn)題，主要是因?yàn)槲覀儧](méi)有對(duì)應(yīng)內(nèi)容，可以暫時(shí)不管

我們?cè)赿ev開(kāi)發(fā)，需要用wbepack-dev-server啟動(dòng)webpack服務(wù)器，那么我們寫(xiě)一個(gè)start指令（這邊start指令有個(gè)特別的地方，平時(shí)的指令需要 `npm run xxx` 才能執(zhí)行，這邊直接用`npm start`）

指令如下

"start": "webpack-dev-server --config ./build/webpack.config.js"

剛剛說(shuō)的設(shè)置NODE_ENV，通過(guò)使用 cross-env 來(lái)傳入，因?yàn)槲覀兪情_(kāi)發(fā)環(huán)境，所以寫(xiě)成NODE_ENV=development，注意，需要安裝開(kāi)發(fā)依賴`npm install cross-env -D`

"start": "cross-env NODE_ENV=development webpack-dev-server --config?./build/webpack.config.js"

這樣我們的本地開(kāi)發(fā)的配置就寫(xiě)好了。

4 跑起來(lái)?。。?/strong>

在跑起來(lái)之前，我建議再檢查一遍配置和我是否相同，下面，是核心文件的截圖，這些截圖上的內(nèi)容，是能夠讓我跑起來(lái)的！——當(dāng)然，可能因?yàn)闀r(shí)效性的緣故，請(qǐng)注意是否因?yàn)椤景姹尽坎煌鴮?dǎo)致不能跑起來(lái)，類似的問(wèn)題，我以后也不會(huì)再進(jìn)行贅述

`build/webpack.config.js`

`package.json`

模版html不是很重要，不過(guò)這里順便截圖下

好了，到了激動(dòng)人心的時(shí)刻，在命令行中運(yùn)行

`npm start`

就可以看到我們的項(xiàng)目成功跑起來(lái)了

訪問(wèn)對(duì)應(yīng)的域名端口地址，可以看到我們起的內(nèi)容～

順便說(shuō)一句，在此之前，我自己跑不起來(lái)，跑一下npm start就會(huì)遇到很多報(bào)錯(cuò)，檢查了很久發(fā)現(xiàn)都是因?yàn)槲易约簩?xiě)配置目錄打了很多錯(cuò)別字，所以跑不起來(lái)，如果同學(xué)你也像下面這樣有各種問(wèn)題，那么請(qǐng)放心，一定能解決，先遍歷一遍，看看是不是有錯(cuò)別字。一定能解決問(wèn)題的！跑起來(lái)項(xiàng)目的那一刻，真的特別開(kāi)心?。?！

* 這個(gè)webpack配置好了的，本地開(kāi)發(fā)支持熱更新，你更新了內(nèi)容一保存，就會(huì)瀏覽器會(huì)自動(dòng)地刷新。

5?把玩下index.ts

index.ts是我們的入口文件

這里我們先簡(jiǎn)單地寫(xiě)一個(gè)內(nèi)容

很“俗套”，但是很有“情懷”

* 現(xiàn)在你可能稍微有點(diǎn)猜到:string是用來(lái)定義類型。不過(guò)這是后面的內(nèi)容，就算你不知道，也不著急。

一起說(shuō)：“Hello world”

6 配置打包命令

進(jìn)入package.json文件下，新增一條指令

`"build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.js"`

在命令行執(zhí)行 `npm run build`命令

打包成功后，我們可以看到dist文件夾下新增了index.html和main.js

index.html有自動(dòng)引入main.js

main.js也是打包好的丑化壓縮后的代碼

然后我們可以直接在瀏覽器中大家我們打包好后的html文件

到這里，咱們系統(tǒng)地走了一遍如何配置webpack來(lái)打包我們的工程文件，就是我們本節(jié)內(nèi)容了。

這部分的代碼內(nèi)容其實(shí)算是簡(jiǎn)單的，上面有詳細(xì)的截圖。

等我有空的時(shí)候，會(huì)專門(mén)整理好發(fā)到一個(gè)倉(cāng)庫(kù)里，現(xiàn)在的話，我需要洗澡睡覺(jué)啦。

在評(píng)論里評(píng)論，可以參與我的一個(gè)督促我學(xué)習(xí)的活動(dòng)。

聲明

本系列內(nèi)容是D1n910通過(guò)學(xué)習(xí)Lison老師的TypeScript完全解讀(26課時(shí))整理的文字筆記，如果看完后覺(jué)得有收獲，抑或想要直接支持，抑或想要直接視頻原版內(nèi)容，請(qǐng)直接到https://segmentfault.com/ls/1650000018455856?r=bPXT7X。

雖然本系列是筆記，但是也有D1n910的心血所在，請(qǐng)勿在未告知D1n910及獲得D1n910允許的情況下直接轉(zhuǎn)載本筆記——如果您是基于筆記又生成您自己的筆記，這是一點(diǎn)問(wèn)題都沒(méi)有的～

標(biāo)簽：