前言
相信大家都知道TypeScript的好處，TypeScript編譯工具可以運行在任何服務器和任何系統上，TypeScript增加了代碼的可讀性和可維護性，很值得我們學習！
下邊我將帶大家一步步實現TypeScript開發環境搭建~
安裝Node.js
相信大家電腦一般都安裝了node.js
如果不確定是否安裝了的話，可以在cmd裏面輸入以下命令：
node -v
如果看到了版本號，則說明已經安裝好了~
創建一個文件夾
文件夾名字：xiaoming
mkdir xiaoming
切換到新建文件夾目錄
cd xiaoming
初始化項目
npm init
回答問題
接着出來了這麼一系列的問題，大家可以直接回車，使用默認值
package name: (xiaoming)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\明\Desktop\xiaoming\package.json:
{
"name": "xiaoming",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
接着項目就會出現一個package.json的配置文件
出現的package.json配置文件內容
內容如下：
{
"name": "xiaoming",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
全局安裝typescript
mac電腦需要在npm 前面加sudo,代表以管理員身份運行
npm install webpack webpack-cli typescript ts-loader --save-dev
安裝成功後進入項目根目錄
用tsc命令進行初始化
tsc --init
此時項目根目錄多了一個tsconfig.json文件
此時tsconfig.json代碼如下：
添加webpack
再添加webpack，這裏我們使用webpack4
npm install webpack-cli webpack dev-server -D
在這裏我提一下webpack4的亮點：
webpack4最大的亮點就是儘可能少的需要我們去配置
我們知道原來在使用webpack2、3的時候，我們需要寫大量的wepack配置，很多資源都要添加node,webpack4很多東西是零配置的
這裏安裝完了我們需要寫一個webpack的配置文件~
寫webpck的配置文件
創建一個build文件夾，裏面創建webpack.config.js文件, 代碼如下：
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
//使用node的模塊
module.exports = {
//這就是我們項目編譯的入口文件
entry: "./src/index.ts",
output: {
filename: "main.js"
},
resolve: {
extensions: ['.ts','tsx','.js']
},
//這裏可以配置一些對指定文件的處理
//這裏匹配後綴爲ts或者tsx的文件
//使用exclude來排除一些文件
module:{
rules:[
{
test:/\.tsx?$/,
use:'ts-loader',
exclude: /node_modules/
}
]
},
//這個參數就可以在webpack中獲取到了
devtool: process.env.NODE_ENV === 'production'? false : 'inline-source-map',
devServer:{
//這個本地開發環境運行時是基於哪個文件夾作爲根目錄
contentBase:'./dist',
//當你有錯誤的時候在控制檯打出
stats: 'errors-only',
//不啓動壓縮
compress: false,
host: 'localhost',
port: 8081
},
//這裏就是一些插件
plugins:[
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['./dist']
}),
new HtmlWebpackPlugin({
template: './src/template/index.html'
})
]
}
繼續創建文件
- 在src的目錄下，創建./src/index.ts
- 在src的目錄下，創建template文件夾
- 在template文件夾下邊創建index.html
目錄結構如下：
安裝ts-loader
解析ts文件轉換成瀏覽器可以識別的文件
npm install ts-loader -D
安裝cross-env
用於設置環境變量的,方便設置開發環境和生產環境
npm install cross-env -D
安裝一些插件
clean-webpack-plugin 能清理一些指定的文件夾
html-webpack-plugin 指定一個編譯的模型
npm install clean-webpack-plugin html-webpack-plugin -D
項目中安裝typescript依賴
之前是全局安裝
npm install typescript
在package.json文件寫指定命令
上邊weapack的命令已經寫好了，下邊我們就在package.json文件中寫指定的命令：
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.js"
},
在index.ts寫代碼測試一下
let num: number = 888
document.title = 'ming'
啓動本地服務器執行
安裝完畢後
npm start
運行效果：
打包執行
npm run build
這裏就多了個dist目錄
最後
如果本文對你有幫助得話，給本文點個贊❤️❤️❤️
歡迎大家加入，一起學習前端，共同進步！
