1.TypeScript完全解讀-開發(fā)環(huán)境搭建

初始化項(xiàng)目

手動(dòng)創(chuàng)建文件夾

D:\MyDemos\tsDemo\client-demo

用VSCode打開

npm init:初始化項(xiàng)目

然后我們的項(xiàng)目根目錄就多了個(gè)package.json的文件

創(chuàng)建相關(guān)目錄文件夾

untils:業(yè)務(wù)相關(guān)的，可服用的方法

assets：主要放靜態(tài)資源

img：圖片

font：字體文件

tools:業(yè)務(wù)無關(guān)的純工具的函數(shù)

api：把一些可以復(fù)用的接口請求的方法，放在api文件夾下

config：一般放配置文件，把一些可能會(huì)修改的配置，抽離出來放在這里

src同比別的文件夾typings：存放ts的聲明文件

build:項(xiàng)目打包上線的一些配置，或者我們本地開發(fā)時(shí)，本地服務(wù)的一些配置，一般就放我們的webpack配置

文件夾建好以后，安裝我們ts的依賴

把typescript和tslint安裝在全局

tslint和eslint都是對代碼風(fēng)格監(jiān)測的工具。tslint是專注于ts的

我們把它們安裝在全局，所以后要交一個(gè) -g

npm install typescript tsint -g

安裝完成后，使用：tsc --init來初始化我們ts的配置

我們客戶看到 里面有很多的注釋文件

這是ts在1.8的版本以后，支持可以在config內(nèi)寫注釋

添加webpack

這里是用webpack4，4最大的亮點(diǎn)就是盡可能少的讓我們?nèi)ヅ渲?/p>

首先需要在項(xiàng)目中安裝webpack

npm install webpack

安裝為開發(fā)依賴 -D

少安裝了依賴，根據(jù)視頻中的再操作一遍

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

安裝完成后，我們需要寫一個(gè)webpack的配置文件，在build文件夾下創(chuàng)建webpack.config.js文件

package.json內(nèi)的scripts節(jié)點(diǎn) ，都可以用npm run去調(diào)用。例如這里現(xiàn)在配置的是test

我們添加一個(gè)運(yùn)行的執(zhí)行 start,其他的指令必須前面應(yīng)npm run 去調(diào)用，例如這個(gè)test的指令，調(diào)用就是:npm run test

但是這個(gè)start指令呢，我們直接使用：npm start就可以了。start的配置，我們待會(huì)再看。

webpack的配置

webpack是運(yùn)行在node環(huán)境下的。只在你編譯的時(shí)候運(yùn)行。

我們使用node的module導(dǎo)出一個(gè)模塊

entry是入口文件，指定了src目錄下的index.ts文件

把這個(gè)文件做為入口文件，那么我們在本地開發(fā)和打包的時(shí)候，他都會(huì)從這個(gè)文件開始，逐漸的往里面添加依賴什么的

然后我們在src下創(chuàng)建index.ts文件，里面的內(nèi)容呢，我們先不用管

output:項(xiàng)目變異完的輸出文件

filename：我們變異完后的文件叫做什么,ts編譯完后都是js文件

resolve:

extensions是一個(gè)數(shù)組

例如上面我們配置了extensions里面有個(gè).js的文件，在src的目錄下有一個(gè)index.js的文件，我們在index.ts內(nèi)要引入這個(gè)同級(jí)別的index.js的文件的話，一般就是這么寫的

importXXfrom'./index.js'

但是我們配置了extensions里面的.js這么個(gè)配置，那么這里我們在import的時(shí)候，就可以把后綴.js省略掉

importXXfrom'./index'

它會(huì)自動(dòng)的去找同級(jí)別下的index開頭的這么個(gè)文件

那么我們這里是開發(fā)ts，所以自然也要個(gè)添加對ts的支持

這里配置了.ts和.tsx這兩種，

tsx里面就是寫一些jsx的語法

module配置項(xiàng)

rules:配置依稀對于制定文件的處理的loader之類的東西

這個(gè)正則表達(dá)式匹配的后綴為ts或者tsx的文件

use：就是表示使用ts-loader來處理ts和tsx格式的文件

那么既然我們配置上了ts-loader。我們就需要使用npm進(jìn)行安裝

npm install ts-loader -D

-D表示 開發(fā)依賴

還要制定exculde來排除node_modules文件夾下的文件，這樣在編譯的時(shí)候就不會(huì)去編譯node_modules文件夾下的文件了。

source-map

開發(fā)的時(shí)候?yàn)榱朔奖阏{(diào)試代碼，是需要source-map

調(diào)試的時(shí)候方便定位你代碼的一個(gè)東西。這里我們使用inline-source-map

開發(fā)的時(shí)候我們是需要source-map。但是實(shí)際打包上線是不需要的，不需要source-map會(huì)增加的編譯速度和打包速度，減少一些資源的空間浪費(fèi)

所以我們這里需要判斷下當(dāng)前是在本地開發(fā)環(huán)境還是上線打包

這個(gè)NODE_ENV需要在哪里傳進(jìn)來呢?在我們的命令里面。我們這先留空，待會(huì)需要用到一個(gè)工具，待會(huì)再來介紹

通過：process.env.NODE_ENV === 'production'來判斷是否是生產(chǎn)環(huán)境

NODE_ENV參數(shù)的傳入

在啟動(dòng)的指令這里，我們需要用到webpack-dev-server,就是一個(gè)我們用于本地開發(fā)的一個(gè)服務(wù)器

如何啟動(dòng)并且應(yīng)用這些配置呢？

webpack-dev-server：這是啟動(dòng)命令

--config：通過config參數(shù)來指定我們webpack的配置文件

那么我們就制定build文件夾下的webpack.config.js文件。

這樣我們就指定了，webpack-dev-server去build文件夾去讀取我們webpack的配置文件。

傳入?yún)?shù)。借助工具：cross-env 后面指定了 NODE_ENV的值是開發(fā)環(huán)境development

這樣在webpack的配置文件中就可以通過process.env.NODE_ENV獲取到我們傳入的值了。

用了cross-env自然我們也需要安裝它

npm install cross-env -D

-D:表示作為開發(fā)依賴進(jìn)行安裝：

這樣我們的本地開發(fā)指令就寫好了，本地開發(fā)利用webpack-dev-server它有一些參數(shù)也可以配置

webpack-dev-server的參數(shù)配置

contentBase:基于哪個(gè)文件夾作為根目錄運(yùn)行的，這里我們配置為根目錄的dist文件夾

stats:

webpack啟動(dòng)后在控制臺(tái)打印出哪些信息，我們只關(guān)注錯(cuò)誤信息，這里只寫個(gè)簡單的errores-only

compress：false不啟動(dòng)壓縮

host：'localhost'

port:端口制定8089

這樣本地開發(fā)服務(wù)器的配置就配置完成了

配置插件：

plugins這里用到兩個(gè)插件

npm install clean-webpack-plugin:可以清理制定的文件夾或者文件

第二個(gè)插件：

html-webpacl-plugin:指定一個(gè)編譯的html文件，后面的編譯呢會(huì)基于此html作為模板來編譯

連個(gè)插件一起安裝：

npm install clean-webpack-plugin html-webpack-plugin -D

使用者兩個(gè)插件需要先引入：

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

首先我們要使用的就是CleanWebpackPlugin給傳入一個(gè)對象，設(shè)置一些配置

程序build之前先清理dist打包生成的文件夾

編譯的時(shí)候制定哪個(gè)html作為模板進(jìn)行編譯

src下創(chuàng)建template文件夾，并再創(chuàng)建index.html文件夾

這樣，這就是我們的模板文件了。

webpack會(huì)打包項(xiàng)目會(huì)生成一個(gè)dist文件。會(huì)把這個(gè)模板文件index.html和我們定義的main.js文件放到一起，并會(huì)自動(dòng)在index.html模板里面引入main.js和這個(gè)文件

項(xiàng)目中安裝ts的依賴

剛才我們是全局中安裝的ts，我們在我們的項(xiàng)目中也要添加依賴

npm install typescript

糾正錯(cuò)誤：

配置文件寫錯(cuò)了多個(gè)地方

運(yùn)行start指令

http://localhost:8089/

有熱更新，修改后會(huì)自動(dòng)刷新頁面

在src/index.ts內(nèi)簡單的定義一個(gè)number類型的變量

配置打包環(huán)境：

添加新的指令build

通過cross-env傳入?yún)?shù) NODE_ENV=production表示生產(chǎn)環(huán)境，我們調(diào)用命令webpack ，然后通過--config 指定配置文件路路徑

因?yàn)閎uild傳入的production生產(chǎn)環(huán)境，所以打包的時(shí)候就不會(huì)產(chǎn)生source-map

npm run build 進(jìn)行打包

main.js文件是經(jīng)過壓縮的

在index.ts編寫代碼修改頁面的title

開發(fā)環(huán)境配置好了

本地運(yùn)行和打包也配合好了

總結(jié)

以上是生活随笔為你收集整理的webpack 读取文件夹下的文件_TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。