簡介
JavaScript 作為一種弱類型的語言为鳄，類型推斷只能提供很有限的支持，TypeScript 提供了一種描述對象形狀的方法歧斟∑危可以幫助提供更好的文檔俊扭，還可以驗證你的代碼可以正常工作，在一些大型的項目中捐康，使用 TypeScript 非常必要，從代碼層次就已經(jīng)避免了很多錯誤贮匕，而且方便文檔的書寫花枫，最主要的就是后期迭代特別爽劳翰，但是對于沒有接觸過強(qiáng)類型語言（Java、C）的童鞋來說乙墙，TypeScript 上手還是有點困難了溺蕉，單就目前前端發(fā)展趨勢來說疯特，TypeScript 還是很重要的，想了解更多 TypeScript 的童鞋可以自己去看 官網(wǎng)录别。
開始
我們需要利用 webpack 創(chuàng)建一個簡單的 vue 項目邻吞，為了方便抱冷，我就直接拿上一篇文章的 Demo 了，小伙伴可以直接 clone 下來并安裝依賴：
git clone https://gitee.com/vv_bug/vue-dist-demo.git && npm install
從 0 開始搭建一個 vue 項目也是非常簡單的赵讯，強(qiáng)烈推薦大家去看我的另外一篇文章 來和 webpack 談場戀愛吧耿眉。
然后我們試著運行一下項目：
npm run dev
然后打開瀏覽器看效果：
支持 TypeScript
這里我們提供兩種方案鸣剪，也是目前比較推薦的兩種。
方式一
利用 Babel 的 @babel/plugin-transform-typescript 插件來實現(xiàn)债鸡。
安裝 @babel/core
babel 核心 API厌均。
npm install -D @babel/core --registry https://registry.npm.taobao.org
安裝 @babel/plugin-transform-typescript 插件
Babel 的 TypeScript 插件。
npm install -D @babel/plugin-transform-typescript --registry https://registry.npm.taobao.org
安裝 babel-loader
babel 加載器。
npm install -D babel-loader --registry https://registry.npm.taobao.org
ok镊屎！安裝完 Babel 的一些依賴后茄螃，我們開始配置 webpack归苍。
我們在工程目錄 vue-dist-demo 下創(chuàng)建一個文件 babel.config.js：
touch babel.config.js
然后寫入以下代碼到 babel.config.js 文件：
module.exports = {
presets: [
[
'@babel/preset-env', // 添加 preset-env 預(yù)設(shè)做語法轉(zhuǎn)換跟 polyfill 添加
{
corejs: 3,
useBuiltIns: 'usage',
modules: false,
},
],
],
plugins: [
[
'@babel/plugin-transform-runtime', // 利用 runtime 做 helpers 跟 regenerator 設(shè)置
{
corejs: false,
helpers: true,
useESModules: false,
regenerator: true,
absoluteRuntime: './node_modules',
},
],
],
};
找到 webpack 的配置文件 webpack.config.js 文件拼弃，然后添加 babel-loader：
...
.module
.rule('babel')
.test(/\.t?j?s?$/) // 對 js、ts 文件進(jìn)行 babel 配置
.use('babel-loader')
.loader('babel-loader')
.end()
.end()
...
webpack.config.js 文件全部配置：
const path = require('path');
const config = new (require('webpack-chain'))();
config
.context(path.resolve(__dirname, '.')) // webpack 上下文目錄為項目根目錄
.entry('app') // 入口文件名稱為 app
.add('./src/main.js') // 入口文件為 ./src/main.ts
.end()
.output
.path(path.join(__dirname, './dist')) // webpack 輸出的目錄為根目錄的 dist 目錄
.filename('[name].[hash:8].js') // 打包出來的 bundle 名稱為 "[name].[hash:8].js"
.publicPath('/') // publicpath 配置為 "/"
.end()
.resolve
.extensions
.add('.js')
.add('.vue') // 配置以 .js 等結(jié)尾的文件當(dāng)模塊使用的時候都可以省略后綴
.end()
.end()
.module
.rule('babel')
.test(/\.t?j?s?$/) // 對 js、ts 文件進(jìn)行 babel 配置
.use('babel-loader')
.loader('babel-loader')
.end()
.end()
.rule('vue') // vue-loader 相關(guān)配置
.test(/\.vue$/) // 匹配 .vue 文件
.use('vue-loader')
.loader('vue-loader')
.end()
.end()
.end()
.plugin('vue-loader-plugin') // vue-loader 必須要添加 vue-loader-plugin
.use(require('vue-loader').VueLoaderPlugin, [])
.end()
.plugin('html') // 添加 html-webpack-plugin 插件
.use(require('html-webpack-plugin'), [
{
template: path.resolve(__dirname, './public/index.html'), // 指定模版文件
chunks: ['app'], // 指定需要加載的 chunk
inject: 'body', // 指定 script 腳本注入的位置為 body
},
])
.end()
.devServer
.host('0.0.0.0') // 服務(wù)器外部可訪問
.disableHostCheck(true) // 關(guān)閉白名單校驗
.contentBase(path.resolve(__dirname, './public')) // 設(shè)置一個 express 靜態(tài)目錄
.historyApiFallback({
disableDotRule: true, // 禁止在鏈接中使用 "." 符號
rewrites: [
{ from: /^\/$/, to: '/index.html' }, // 將所有的 404 響應(yīng)重定向到 index.html 頁面
],
})
.port(8080) // 當(dāng)前端口號
.hot(true) // 打開頁面熱載功能
.sockPort('location') // 設(shè)置成平臺自己的端口
.open(true);
module.exports = config.toConfig();
ok鲁森！就是這么簡單歌溉，接著我們來測試一下骑晶。
測試
我們修改一下 src/app.vue：
<template>
<div class="app">{{ msg }}</div>
</template>
<script lang="ts">
export default {
name: "app",
data(){
return {
msg: "hello"
}
},
created() {
let name: string = "hello ts";
alert(name);
}
}
</script>
可以看到透罢，我們給 script 標(biāo)簽加了一個 lang="ts" 屬性，并且在 create 方法中添加了一段 TypeScript 代碼乾胶，然后我們重新運行看一下效果：
npm run dev
可以看到识窿，webpack 正常編譯了我們的 ts 語法，項目正常運行缩宜。
方式二
利用 ts-loader 結(jié)合官方 typescript 庫來實現(xiàn)甥温。
安裝 typescript
ts 語法核心 API。
npm install -D typescript --registry https://registry.npm.taobao.org
安裝 ts-loader
ts 文件加載器宋梧。
npm install -D ts-loader --registry https://registry.npm.taobao.org
除了配置 ts-loader 外捂龄，我們還需要在工程目錄 vue-dist-demo 下創(chuàng)建一個 ts 配置文件 tsconfig.json：
touch tsconfig.json
然后寫入以下代碼到 tsconfig.json 文件：
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"suppressImplicitAnyIndexErrors": true,
"resolveJsonModule": true,
"sourceMap": true,
"baseUrl": ".",
"types": ["webpack-env"],
"paths": {
"@/*": ["src/*"]
},
"lib": ["esnext", "dom", "dom.iterable"]
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
"exclude": ["node_modules"]
}
然后找到 webpack 配置文件 webpack.config.js倦沧，添加 ts-loader：
...
.module
.rule("type-script") // 配置 ts-loader
.test(/\.tsx?$/) // loader 加載的條件是 ts 或 tsx 后綴的文件
.use("ts-loader")
.loader("ts-loader")
.options({ // ts-loader 相關(guān)配置
transpileOnly: true, // 只用于編譯
appendTsSuffixTo: ['\\.vue$'] // 給 .vue 文件添加后綴
})
.end()
.end()
...
webpack.config.js 文件全部配置：
const path = require('path');
const config = new (require('webpack-chain'))();
config
.context(path.resolve(__dirname, '.')) // webpack 上下文目錄為項目根目錄
.entry('app') // 入口文件名稱為 app
.add('./src/main.ts') // 入口文件為 ./src/main.ts
.end()
.output
.path(path.join(__dirname, './dist')) // webpack 輸出的目錄為根目錄的 dist 目錄
.filename('[name].[hash:8].js') // 打包出來的 bundle 名稱為 "[name].[hash:8].js"
.publicPath('/') // publicpath 配置為 "/"
.end()
.resolve
.extensions
.add('.js')
.add('.vue') // 配置以 .js 等結(jié)尾的文件當(dāng)模塊使用的時候都可以省略后綴
.end()
.end()
.module
.rule("type-script") // 配置 ts-loader
.test(/\.tsx?$/) // loader 加載的條件是 ts 或 tsx 后綴的文件
.use("ts-loader")
.loader("ts-loader")
.options({ // ts-loader 相關(guān)配置
transpileOnly: true, // 只用于編譯
appendTsSuffixTo: ['\\.vue$'] // 給 .vue 文件添加后綴
})
.end()
.end()
.rule('vue') // vue-loader 相關(guān)配置
.test(/\.vue$/) // 匹配 .vue 文件
.use('vue-loader')
.loader('vue-loader')
.end()
.end()
.end()
.plugin('vue-loader-plugin') // vue-loader 必須要添加 vue-loader-plugin
.use(require('vue-loader').VueLoaderPlugin, [])
.end()
.plugin('html') // 添加 html-webpack-plugin 插件
.use(require('html-webpack-plugin'), [
{
template: path.resolve(__dirname, './public/index.html'), // 指定模版文件
chunks: ['app'], // 指定需要加載的 chunk
inject: 'body', // 指定 script 腳本注入的位置為 body
},
])
.end()
.devServer
.host('0.0.0.0') // 服務(wù)器外部可訪問
.disableHostCheck(true) // 關(guān)閉白名單校驗
.contentBase(path.resolve(__dirname, './public')) // 設(shè)置一個 express 靜態(tài)目錄
.historyApiFallback({
disableDotRule: true, // 禁止在鏈接中使用 "." 符號
rewrites: [
{ from: /^\/$/, to: '/index.html' }, // 將所有的 404 響應(yīng)重定向到 index.html 頁面
],
})
.port(8080) // 當(dāng)前端口號
.hot(true) // 打開頁面熱載功能
.sockPort('location') // 設(shè)置成平臺自己的端口
.open(true);
module.exports = config.toConfig();
測試
重命名 src/main.js 為 src/main.ts，然后跟方式一一樣愈污，修改一下 src/app.vue 文件：
<template>
<div class="app">{{ msg }}</div>
</template>
<script lang="ts">
export default {
name: "app",
data(){
return {
msg: "hello"
}
},
created() {
let name: string = "hello ts-loader";
alert(name);
}
}
</script>
然后我們重新運行看一下效果：
npm run dev
可以看到暂雹，webpack 正常編譯了我們的 ts 語法创夜，項目正常運行驰吓。
總結(jié)
“方式一” 還是有局限性的，只是單純的去轉(zhuǎn)換 ts 語法姑廉，在平時項目開發(fā)中還是推薦使用 “方式二”翁涤，因為更符合 TypeScript 官網(wǎng)規(guī)范萌踱，支持的功能也更豐富号阿，而且通過設(shè)置 tsconfig.json 配置文件簡單清晰明了扔涧，并且能夠與 IDE 完美結(jié)合，實現(xiàn) ts 語法智能提示功能弯汰。
