وبپک - مهاجرت از react-jsx به typescript-tsx در ریاکت

من میخواهم از react-jsx ریاکت به typescript-tsx ریاکت مهاجرت کنم. از آنجایی که فایلهای زیادی برای تبدیل دارم، میخواهم این کار را به تدریج انجام دهم. میخواهم فایلهای قدیمی react-jsx را نگه دارم و برای ویژگیهای جدید در برنامهام از تایپاسکریپت استفاده کنم، سپس فایلهای قدیمی react-jsx را به tsx تبدیل کنم. آیا راهی وجود دارد که همزمان react-jsx را با Babel و tsx در یک فایل bundle در webpack کامپایل کرد؟

پاسخ شماره ۱

بله وجود دارد! در تنظیمات webpack خود کافی است که برای فایلهای *.jsx و *.tsx بارگذارهای مختلف مشخص کنید. در مواقعی که هم از تایپاسکریپت و هم از Babel استفاده میکنم، معمولاً سعی میکنم تایپاسکریپت JSX را حفظ کند و ماژولهای ES6 را خروجی دهد، سپس از Babel برای پردازش JSX استفاده میکنم. فایل .tsconfig شما چیزی شبیه به این خواهد بود:

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

و لودرهای وبپک شما (فرض بر نسخه ۲) به این صورت خواهد بود:

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