从 react-jsx 迁移到 typescript-tsx react

Question

我想从 react-jsx 反应迁移到 typescript-tsx 反应。因为我有很多文件要转换，所以我想逐步进行。我想保留旧的 react-jsx 文件，为了在我的应用程序中使用新功能，我使用打字稿，然后我会将旧的 react-jsx 文件转换为 tsx。有什么方法可以在 webpack 的捆绑文件中将 react-jsx 与 Babel 和 tsx 一起编译？

Answer 1

是的！在你的 webpack 配置中，你只需要为 *.jsx 和 *.tsx 文件指定不同的加载器。在同时使用 typescript 和 babel 的情况下，我倾向于使用 typescript 来保留 JSX，并输出 ES6 模块，然后使用 Babel 来处理 JSX。您的 .tsconfig 类似于：

{
    "compilerOptions": {
        "target": "es6",
        "module": "es6",
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "jsx": "preserve",
        "allowJs": false,
        "moduleResolution": "node",
        "lib": [
            "dom", 
            "es7"
        ]
    }
}

你的 webpack（假设是 v2）加载器是：

{
    test: /\.jsx?$/,
    use: [{
        loader: "babel-loader",
    }],
    exclude: /node_modules/,
},
{
    test: /\.tsx?$/,
    use: [
        {
            loader: "babel-loader"
        },
        {
            loader: "ts-loader"
        }
    ]
}

从 react-jsx 迁移到 typescript-tsx react

Migration from react-jsx to typescript-tsx react

jsx

typescript

reactjs

webpack

react-jsx