一、webpack
（1）通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。
（2）步骤：
1.初始化项目
进入项目根目录，执行命令 npm init -y
主要作用：创建package.json文件
2.下载构建工具
根目录执行命令
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中的清除插件，每次构建都会先清除目录
3.根目录下创建webpack的配置文件webpack.config.js
//引入path包
const path = require("path");
//引入生成html插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//引入CleanWebpackPlugin插件，每次打包时都会先把dist文件先删除再生成新的dist文件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
//webpack中的所有的配置信息都应该写在module.export中
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的箭头函数，可选（兼容ie）
}
},
//用来设置引用模块，表示.ts,.js可以作为模块进行引用
resolve: {
extensions: [".ts", ".js"]
},
//指定webpack打包时要使用的模块
module: {
//指定要加载的规则
rules: [
{
//test指定的是规则生效的文件，下面表示已.ts结尾的文件
test: /\.ts$/,
//要使用的loader
use: {
loader: "ts-loader"
},
//要排除的文件
exclude: /node_modules/
}
]
},
//配置Webpack插件
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
//自定义html的标题
title:'TS测试'
//或者可以引入html模板
template:'./src/index.html'
}),
]
}4.根目录下创建tsconfig.json，配置可以根据自己需要
{
"compilerOptions": {
"target": "ES2015",
"module": "ES2015",
"strict": true
}
}5.修改package.json添加如下配置
{
...略...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve --open chrome.exe"
},
...略...
}6.在src下创建ts文件，并在并命令行执行npm run build对代码进行编译，或者执行npm start来启动开发服务器
二、Babel
（1）经过一系列的配置，使得TS和webpack已经结合到了一起，除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中。
1.安装依赖包
根目录执行命令
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语法
2.修改webpack.config.js配置文件
...略...
module: {
rules: [
{
test: /\.ts$/,
//要使用的loader
use: [
//配置babel
{
//指定加载器
loader: "babel-loader",
//设置babel
options:{
presets: [
[
//设置指定环境的插件
"@babel/preset-env",
//配置信息
{
//要兼容的目标浏览器
"targets":{
"chrome": "58",
"ie": "11"
},
//指定corejs版本
"corejs":"3",
//使用corejs的方式 ”usage“ 表示按需加载
"useBuiltIns": "usage"
}
]
]
}
},
{
loader: "ts-loader",
}
],
exclude: /node_modules/
}
]
}
...略...如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。
三、总结
webpack作为一种构建工具可以结合ts进行使用，使得ts在项目中开发中更加方便和高效，babel则主要是对js进行进一步的处理使得可以更好的兼容其他浏览器