使用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文件。