• 经过一系列的配置，使得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配置文件

      - javascript<br /> ...略...<br /> module: {<br /> rules: [<br /> {<br /> test: /\.ts$/,<br /> use: [<br /> {<br /> loader: "babel-loader",<br /> options:{<br /> presets: [<br /> [<br /> "@babel/preset-env",<br /> {<br /> "targets":{<br /> "chrome": "58",<br /> "ie": "11"<br /> },<br /> "corejs":"3",<br /> "useBuiltIns": "usage"<br /> }<br /> ]<br /> ]<br /> }<br /> },<br /> {<br /> loader: "ts-loader",<br /> <br /> }<br /> ],<br /> exclude: /node_modules/<br /> }<br /> ]<br /> }<br /> ...略...<br />

      - 如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。- 通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。

      - 步骤：

      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

      - javascript<br /> const path = require("path");<br /> const HtmlWebpackPlugin = require("html-webpack-plugin");<br /> const { CleanWebpackPlugin } = require("clean-webpack-plugin");<br /> <br /> module.exports = {<br /> optimization:{<br /> minimize: false // 关闭代码压缩，可选<br /> },<br /> <br /> entry: "./src/index.ts",<br /> <br /> devtool: "inline-source-map",<br /> <br /> devServer: {<br /> contentBase: './dist'<br /> },<br /> <br /> output: {<br /> path: path.resolve(__dirname, "dist"),<br /> filename: "bundle.js",<br /> environment: {<br /> arrowFunction: false // 关闭webpack的箭头函数，可选<br /> }<br /> },<br /> <br /> resolve: {<br /> extensions: [".ts", ".js"]<br /> },<br /> <br /> module: {<br /> rules: [<br /> {<br /> test: /\.ts$/,<br /> use: {<br /> loader: "ts-loader" <br /> },<br /> exclude: /node_modules/<br /> }<br /> ]<br /> },<br /> <br /> plugins: [<br /> new CleanWebpackPlugin(),<br /> new HtmlWebpackPlugin({<br /> title:'TS测试'<br /> }),<br /> ]<br /> <br /> }<br />

      4. 根目录下创建tsconfig.json，配置可以根据自己需要

      - json<br /> {<br /> "compilerOptions": {<br /> "target": "ES2015",<br /> "module": "ES2015",<br /> "strict": true<br /> }<br /> }<br />

      5. 修改package.json添加如下配置

      - json<br /> {<br /> ...略...<br /> "scripts": {<br /> "test": "echo \"Error: no test specified\" && exit 1",<br /> "build": "webpack",<br /> "start": "webpack serve --open chrome.exe"<br /> },<br /> ...略...<br /> }<br />

      6. 在src下创建ts文件，并在并命令行执行npm run build对代码进行编译，或者执行npm start来启动开发服务器



      ## 5、Babel

      - 经过一系列的配置，使得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配置文件

      - javascript<br /> ...略...<br /> module: {<br /> rules: [<br /> {<br /> test: /\.ts$/,<br /> use: [<br /> {<br /> loader: "babel-loader",<br /> options:{<br /> presets: [<br /> [<br /> "@babel/preset-env",<br /> {<br /> "targets":{<br /> "chrome": "58",<br /> "ie": "11"<br /> },<br /> "corejs":"3",<br /> "useBuiltIns": "usage"<br /> }<br /> ]<br /> ]<br /> }<br /> },<br /> {<br /> loader: "ts-loader",<br /> <br /> }<br /> ],<br /> exclude: /node_modules/<br /> }<br /> ]<br /> }<br /> ...略...<br />

      - 如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。