从 react-jsx 迁移到 typescript-tsx react

Question

我想从 react-jsx react 迁移到 typescript-tsx react。因为我有很多文件要转换，所以我想逐步进行。我想保留旧的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"
        }
    ]
}