从react-jsx迁移到typescript-tsx会有所反应

Question

我想从react-jsx反应转移到typescript-tsx反应。由于我有很多要转换的文件，我想逐渐进行。我想保留旧react-jsx文件，对于我的应用程序中的新功能，我使用typescript，然后我将旧的react-jsx文件转换为tsx。有没有办法在react-jsx的捆绑文件中同时编译Babel tsx和webpack？

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"
        }
    ]
}