Question

我通过在HTML页面中包含React库脚本标签，并在脚本标签中加载组件来构建一个非常基本的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，因此设置不同。

打字稿设置

nom install typescript
npx tsc --init

TSCONFIG.json

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

现在，我应该可以运行npm run build，但是找不到package.json的设置。我应该使用tsc watch还是babel watch吗？还是在使用打字稿时可以抛弃babel？

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

Answer 1

您可以使用Babel和@babel/preset-typescript来编译Typescript。

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

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

因此只需添加此预设并将tsconfig.json添加到您的项目中，便可以转换TS。

对于more info

如何在没有create-react-app的情况下编译TSX？

1 个答案: