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

初始化項目

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

D:\MyDemos\tsDemo\client-demo

用VSCode打開

npm init:初始化項目

然后我們的項目根目錄就多了個package.json的文件

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

untils:業(yè)務相關的，可服用的方法

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

img：圖片

font：字體文件

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

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

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

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

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

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

把typescript和tslint安裝在全局

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

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

npm install typescript tsint -g

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

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

這是ts在1.8的版本以后，支持可以在config內寫注釋

添加webpack

這里是用webpack4，4最大的亮點就是盡可能少的讓我們去配置

首先需要在項目中安裝webpack

npm install webpack

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

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

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

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

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

我們添加一個運行的執(zhí)行 start,其他的指令必須前面應npm run 去調用，例如這個test的指令，調用就是:npm run test

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

webpack的配置

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

我們使用node的module導出一個模塊

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

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

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

output:項目變異完的輸出文件

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

resolve:

extensions是一個數(shù)組

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

importXXfrom'./index.js'

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

importXXfrom'./index'

它會自動的去找同級別下的index開頭的這么個文件

那么我們這里是開發(fā)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表示 開發(fā)依賴

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

source-map

開發(fā)的時候為了方便調試代碼，是需要source-map

調試的時候方便定位你代碼的一個東西。這里我們使用inline-source-map

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

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

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

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

NODE_ENV參數(shù)的傳入

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

如何啟動并且應用這些配置呢？

webpack-dev-server：這是啟動命令

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

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

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

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

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

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

npm install cross-env -D

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

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

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

contentBase:基于哪個文件夾作為根目錄運行的，這里我們配置為根目錄的dist文件夾

stats:

webpack啟動后在控制臺打印出哪些信息，我們只關注錯誤信息，這里只寫個簡單的errores-only

compress：false不啟動壓縮

host：'localhost'

port:端口制定8089

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

配置插件：

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下創(chuàng)建template文件夾，并再創(chuàng)建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類型的變量

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

添加新的指令build

通過cross-env傳入參數(shù) NODE_ENV=production表示生產環(huán)境，我們調用命令webpack ，然后通過--config 指定配置文件路路徑

因為build傳入的production生產環(huán)境，所以打包的時候就不會產生source-map

npm run build 進行打包

main.js文件是經過壓縮的

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。