reactjs - 如何在没有 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 transpolar:

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

现在我可以将我的 JSX 组件转换为普通的 JS:

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

这很好，但现在我还想编译 Typescript TSX， but these docs are a bit unclear on how to combine these .他们指的是 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 的最基本设置是什么？

Answer 1

您可以使用带有 @babel/preset-typescript 的 Babel 编译 Typescript .

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

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

因此，只需添加此预设并添加 tsconfig.json到您的项目中，您将能够转译 TS。

对于 more info