从 react-jsx 迁移到 typescript-tsx react

Posted 2023-02-22

【中文标题】从 react-jsx 迁移到 typescript-tsx react

【英文标题】：Migration from react-jsx to typescript-tsx react

【发布时间】：2017-11-03 08:37:24

【问题描述】：

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

【参考方案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"
        
    ]