通常情况下，实际开发中我们都需要使用构建工具对代码进行打包；
TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS；
步骤如下：
进入项目根目录，执行命令 npm init -y，创建package.json文件
命令如下：
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
共安装了7个包:
- webpack：构建工具webpack
- webpack-cli：webpack的命令行工具
- webpack-dev-server：webpack的开发服务器
- typescript：ts编译器
- ts-loader：ts加载器，用于在webpack中编译ts文件
- html-webpack-plugin：webpack中html插件，用来自动创建html文件
- clean-webpack-plugin：webpack中的清除插件，每次构建都会先清除目录
根目录下创建webpack的配置文件webpack.config.js：
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
optimization:{
minimize: false // 关闭代码压缩，可选
},
entry: "./src/index.ts",
devtool: "inline-source-map",
devServer: {
contentBase: './dist'
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
environment: {
arrowFunction: false // 关闭webpack的箭头函数，可选
}
},
resolve: {
extensions: [".ts", ".js"]
},
module: {
rules: [
{
test: /\.ts$/,
use: {
loader: "ts-loader"
},
exclude: /node_modules/
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title:'TS测试'
}),
]
}根目录下创建tsconfig.json，配置可以根据自己需要
{
"compilerOptions": {
"target": "ES2015",
"module": "ES2015",
"strict": true
}
}修改package.json添加如下配置
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve --open chrome.exe"
},
...
}在src下创建ts文件，并在并命令行执行npm run build对代码进行编译；
或者执行npm start来启动开发服务器；
除了webpack，开发中还经常需要结合babel来对代码进行转换；
以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中；
虽然TS在编译时也支持代码转换，但是只支持简单的代码转换；
对于例如：Promise等ES6特性，TS无法直接转换，这时还要用到babel来做转换；
安装依赖包：
npm i -D @babel/core @babel/preset-env babel-loader core-js
共安装了4个包，分别是：
-
@babel/core：babel的核心工具
-
@babel/preset-env：babel的预定义环境
-
@babel-loader：babel在webpack中的加载器
-
core-js：core-js用来使老版本的浏览器支持新版ES语法
修改webpack.config.js配置文件
...
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: "babel-loader",
options:{
presets: [
[
"@babel/preset-env",
{
"targets":{
"chrome": "58",
"ie": "11"
},
"corejs":"3",
"useBuiltIns": "usage"
}
]
]
}
},
{
loader: "ts-loader",
}
],
exclude: /node_modules/
}
]
}
...如此一来，使用ts编译后的文件将会再次被babel处理；
使得代码可以在大部分浏览器中直接使用；
同时可以在配置选项的targets中指定要兼容的浏览器版本；