将Babel添加到Typescript React app

Question

我使用create-react-app创建了一个带有Typescript支持的React应用程序。

我使用Typescript转换器定位ES5，它支持ES6语法，但不像Babel那样为ES6的增强型数组功能添加polyfill。

有没有办法同时使用Typescript和Babel？

即。 .ts＆gt; ES6＆gt; babel＆gt; ES5。

Answer 1

这就是我的方法：

1. create-react-app your-app
2. cd your-app
3. tsc --init（初始化您的Typescript配置文件）
4. mkdir ts（创建一个ts文件夹来存储您的Typescript源代码）
5. 删除src文件夹中的现有文件。

6. 编辑tsconfig.json文件并设置以下选项：

   "target": "es2017", "module": "es2015", "jsx": "react-native", "outDir": "./src", "rootDir": "./ts", "moduleResolution": "node"

7. tsc -w -p .（在监视模式下启动Typescript编译器）

8. npm start（启动React开发脚本）

现在，在index.tsx文件夹中创建ts，然后开始构建您的应用。当您添加和保存文件时，它们将由Typescript编译器编译并复制到src文件夹中，Babel / CRA将在其中将其拾取并将其转换为CRA通常执行的任何操作。此方法保留CRA（create-react-app）项目结构，不需要替换react-scripts等。您只需在Typescript中编码，Typescript编译器将其编译为现代Javascript，CRA完成剩下的工作。

警告：虽然tsc将在其输出文件夹（src）中创建Javascript文件，但您必须手动复制css，图像和其他静态资源。

Answer 2

  

为B6的增强型阵列功能等添加polyfill，就像Bable那样。

巴贝尔不这样做。 core-js这样做。您可以将Core-js与TypeScript一起使用。只需在代码中添加以下内容：

import 'core-js'

更多

• Covered in the lib.d.ts option