首页 > 解决方案 > Babel 打字稿预设不与反应预设一起使用

问题描述

我正在使用 babel react 预设将带有 JSX 文件的 React 组件转换为 JS 文件。这很好用!

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

现在我添加了打字稿预设,

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

两个预设都在 .babelrc 中:

{
    "presets": [
        ["@babel/env", {"modules": false }],
        "@babel/preset-typescript",
        "@babel/preset-react"
    ]
}

我将目录添加到 tsconfig.json

{
    "compilerOptions": {
        "rootDir": "src",
        "outDir": "docs/js"
    },
    "include": [
        "src/**/*"
    ]
}

但是当我运行 Babel 时

npx babel src --out-dir prod/js

打字稿预设被忽略。反应预设确实有效!

如果我在终端中手动调用打字稿预设,它确实有效:

npx babel --presets @babel/preset-typescript src/test.ts

但是现在我的 React 代码被忽略了。

如何将这两个预设与 Babel 结合使用?

标签: reactjstypescriptbabeljs

解决方案


推荐阅读