如何在 Webpack 中使用带有 React 的 Typescript 目标 ES5？答案

【问题标题】：How to have Typescript target ES5 with React in Webpack?如何在 Webpack 中使用带有 React 的 Typescript 目标 ES5？
【发布时间】：2016-12-24 06:48:23
【问题描述】：

我们有一个用 Typescript 编写的 React Web 应用程序，它运行良好，并且在 tsconfig.json 文件中以 ES6 为目标。

现在我们想在编译部署到生产环境后使用 Uglifyjs 缩小它。失败是因为 Uglify 仅支持 ES5（甚至 #harmony 分支，我已经尝试过了）。

所以我需要 webpack 输出是 ES5。但是当我在我们的 tsconfig 文件中设置 "target": "es5" 时，webpack 编译失败说：Unexpected token (164:41) You may need an appropriate loader to handle this file type.

我们如何使用 React 在 Typescript 中定位 ES5 以使其正常工作？

附上错误截图：

【问题讨论】：

那里有 JSX 吗？没有看到那条线，很难说出具体的内容。
意外的令牌是什么？
我附上了错误的行。但我不认为这很重要。一切都在 ES6 中编译。那么为什么它会在 ES5 中失败呢？ target 是我们要到的版本，而不是我们要来自的源代码版本。没有？
一些ES6功能在定位ES5时无法编译，所以你需要弄清楚编译器到底在抱怨什么，从你的截图中并不清楚。
当定位 ES6 时，编译器使用 lib.es6.d.ts 而不是 lib.d.ts，因此定位时不会包含某些内容（例如 Symbol、Iterator 等） ES5。我从未使用过 Babel，但据我了解，它是一个运行时工具，而您的问题出在编译时。

标签： reactjs typescript webpack uglifyjs

【解决方案1】：

答案是，你不能。

Babel 可以将 ES7 转换为 ES6。但它can't transpile ES6 to ES5，因为它使用了一个polyfill（在浏览器中加载.js 库）。

因此，由于无法从源代码中获取 ES5，因此无法使用 Uglify。

您将不得不单独依赖 gzipping (which is a substantial size decrease)。

【讨论】：