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

时间:2017-06-02 03:36:37

标签: reactjs typescript webpack react-jsx jsx

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

1 个答案:

答案 0 :(得分:2)

是的!在您的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"
        }
    ]
}