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

前言

目前，ES6标准逐渐成为主流，然而一些旧的浏览器，对于ES6的支持并不十分完善，这时候就需要将ES6转为ES5，以兼容旧的浏览器。
Webpack是一个现代 JavaScript 应用程序的静态模块打包器，功能上非常的强大，相关的工具和插件也极其丰富。本文就利用Webpack将Typescript Es6项目编译并打包为JavaScript 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\" && 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"
}

配置说明: mode -> 模式，分开发模式和生产模式，这里配置的是开发模式，开发模式下生成的代码可读性很强
entry -> 入口文件,Webpack利用入口文件分析所有的文件依赖
output -> 输出配置, path为路径地址，filename为文件名
resolve -> 决定那些文件可以被解析
module.rules -> 配置loader，Webpack可以利用配置的loader对文件进行预处理，将we年从不同语言不同模块转换为需要的JavaScript，然后再打包。这里我们用ts-loader编译ts文件，traceur-loader将ES6转换为ts5。
注意：loader的执行顺序是安装配置的loader相反的顺序执行的，按照上面的配置，先执行ts-loader，再执行traceur-loader
配置好后,在项目根目录下执行npx webpack，即可看到项目已经打包为ES5 Bundle文件。