• 通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，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来启动开发服务器
      image.png