如何在不使用create-react-app的情况下编译TSX？

Question

我正在构建一个非常基础的React应用程序，通过在我的html页面中包含React库脚本标签，并在脚本标签中加载我的组件来实现。我没有使用模块或create-react-app。我的组件看起来像这样：

TIPS.JS

class Tips extends React.Component {
    constructor() {
        super()
    }

    render() {
        return (
            <div>
                <h1>Hello World</h1>
            </div>
        )
    }
}

我已经安装了Babel转译器：

npm install babel-cli@6 babel-preset-react-app@3

现在，我可以使用以下方式将我的JSX组件转译为普通的JS：

npx babel --watch src --out-dir . --presets react-app/prod 

这很好，但现在我想同时编译Typescript TSX，但这些文档对如何组合它们有点不清楚。它们提到Microsoft Typescript React Starter，但那个使用Webpack，所以它的设置不同。

设置Typescript

nom install typescript
npx tsc --init

TSCONFIG.json

{
  "compilerOptions": {
      "rootDir": "src",
      "outDir": "build"
  },
}

现在我应该能够运行npm run build，但是我找不到package.json的设置。我应该使用tsc watch还是babel watch？或者在使用typescript时可以丢弃babel吗？

换句话说，不使用模块和webpack，将TSX组件编译为javascript的最基本设置是什么？

- Kokodoko

Answer 1

你可以使用 @babel/preset-typescript 来编译 TypeScript。

npm install --save-dev @babel/preset-typescript

// .babelrc
{
  "presets": ["@babel/preset-typescript"]
}

只需添加此预设并将tsconfig.json添加到您的项目中，即可对TS进行转译。

有关更多信息，请参阅 此处。

- felixmosh

---

感谢您指出正确的方向！我刚刚发现 react-app 预设默认已经包含了 TypeScript 选项，因此您甚至不需要安装 preset-typescript。在 .babelrc 文件中，您可以添加 "presets": [["react-app", { "flow": false, "typescript": true }]]。 - Kokodoko

抱歉，在添加 TypeScript 预设之后，我的 .ts 文件仍然被忽略了。你有什么想法我漏掉了什么吗？ - Kokodoko

可能是路径问题？尝试在tsconfig的includes属性中指定glob。 - felixmosh

我发现只有在.babelrc中设置了isTsx:true和extensions:all这些附加设置时，它才能正常工作。Babel网站上的文档非常不完善。 - Kokodoko

你能让Babel输出编译错误吗？ - undefined