使用Webpack打包Typescript ES6项目（转ES5）

本文介绍: 目前，ES6标准逐渐成为主流，然而一些旧的浏览器，对于ES6的支持并不十分完善，这时候就需要将ES6转为ES5，以兼容旧的浏览器。Web p ack是一个现代 Jav aSc rip t 应用程序的静态模块打包器，功能上非常的强大，相关的工具和插件也极其丰富。本文就利用Web p ack将Typescript Es6项目编译并打包为Jav aSc rip t ES5 Bundle文件。

前言

目前，ES6标准逐渐成为主流，然而一些旧的浏览器，对于ES6的支持并不十分完善，这时候就需要将ES6转为ES5，以兼容旧的浏览器。
Web p ack是一个现代 Jav aSc rip t 应用程序的静态模块打包器，功能上非常的强大，相关的工具和插件也极其丰富。本文就利用Web p ack将Typescript Es6项目编译并打包为Jav aSc rip t ES5 Bundle文件。

使用 工具

Webpack –主要的打包工具
Typescript —typescript 编译器
ts-loader —typescript 编译器
traceur-loader –ES6转ES5工具
安装过程这里就跳过了，下面是package.json的配置参考

{
  "name": "testlayav2ts1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "bin": {
    "testlayav2ts1": "index.js"
  },
  "scripts": {
    "test": "echo "Error: no test specified" &amp;&amp; exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "traceur-loader": "^0.6.3",
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^4.10.0"
  }
}

配置 webpack.config.js

配置参考如下：

var path = require("path");
module.exports = {
    mode: "development",
    entry: "./src/Main.ts",
    output: {
        path: path.resolve(__dirname, "bin/js"),
        filename: "bundle.js"
    },
    resolve: {
        extensions: [".ts", ".tsx"]
    },
    module: {
        rules:[
            { test: /.tsx?$/, use: "traceur-loader" },
            { test: /.tsx?$/, use: "ts-loader" }
        ]
    },
    target: "web",
    devtool: "source-map"
}