配置Babel+TS环境
3views
ES6及以后版本引入了大量新特性，比如class、ES Module方案、代理和反射等，但是直到现在浏览器、Node等JS引擎都或多或少存在兼容性问题。为此，现代 Web 开发流程中通常会引入 Babel 等转义工具。
Babel 是一个开源 JavaScript 转编译器，它能将高版本 —— 如 ES6 代码等价转译为向后兼容，能直接在旧版 JavaScript 引擎运行的低版本代码，例如：
// 使用 Babel 转译前arr.map(item => item + 1)
// 转译后arr.map(function (item){
return item + 1;
})
在 Webpack 中之需要如下配置：
module.exports = {
/* ... */
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader'],
},
],
},
};
此时可以在babel配置文件或rule.options中配置，例如：
module.exports = {
/* ... */
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
],
},
],
},
};
关于更多 @babel/preset-env 配置，请参考babel官网文档
Webpack 有很多种接入 TypeScript 的方法，包括：
不过，@babel/preset-typescript 只是简单完成代码转换，并未做类似 ts-loader 的类型检查工作，大家需要根据实际场景选择适当工具。
可以参考我的另一篇文章：webpack 配置 TypeScript 的两种主流方式