如何在 TypeScript 中使用 es6 与 react、webpack 和 babel？答案

【问题标题】：How to use es6 in TypeScript with react, webpack and babel?如何在 TypeScript 中使用 es6 与 react、webpack 和 babel？
【发布时间】：2016-11-11 20:45:05
【问题描述】：

我是前端开发的新手，但在我看来，一个简单的tutorial 可以让我快速开始解决主题领域的问题。问题是 ES5。它不包含对我来说常用且重要的工具，例如键值映射。

据我在博客中的搜索了解，为了解决这个问题，我需要使用 Babel 将编译后的 ES6-javascript 翻译成 ES5-javascript。

很遗憾，我对 babel、webpack 和 npm 不熟悉，也找不到此类项目的工作指南.有什么建议吗？

【问题讨论】：

为什么使用 babel 而不是 tsc 将 typescript 转换为 es5？
github上有很多入门项目。所以不是这类问题的地方。以 rangle 为例，github.com/rangle/typescript-react-redux-starter
babeljs.io/docs/setup
好的。无论如何，该链接是我一直在寻找的。span>
一个警告。我一直在寻找具有最小依赖性的分步说明，以及它如何与其他工具交互的说明。但是，上面的链接只是应用程序模板。此外，那里有很多我目前不需要的员工

标签： typescript npm webpack ecmascript-6 babeljs

【解决方案1】：

这是我的 webpack json 文件，看看如何在 dist 文件夹中配置 babel 使用 webpack 转译为纯 JavaScript：https://github.com/zuoqin/ZHReact/blob/master/webpack.config.prod.js 在 loader 部分我们看到了 babel。

和 npm json 文件在开始时运行 webpack 进行转译：https://github.com/zuoqin/ZHReact/blob/master/package.json

下载https://github.com/zuoqin/ZHReact后，您只需要：

将目录更改为项目根目录
npm 安装
npm 开始构建

它将运行 webpack，然后运行服务器

【讨论】：