Migrating from Babel to SWC with Rollup

1k Views Asked by At

I'm planning to Migrate from Babel to SWC, but I can't find the way how to use @babel/plugin-transform-runtime in SWC. To avoid polluting the global scope, I want to create a sandboxed environment for my code.

build.js(Babel)

const buildBundle = async function buildBundle() {
    const rollupConfig = {
        input: paths.input,
        plugins: [
            sourcemaps(),
            commonjs(),
            nodeResolve({
                extensions,
            }),
            babel({
                exclude: /^(.+\/)?node_modules\/.+$/,
                babelHelpers: 'runtime',
                "presets": [
                    [
                          "@babel/preset-env",
                    ],
                    [
                        "@babel/preset-typescript"
                    ]
                ],
                "plugins": [
                    [
                        "@babel/plugin-transform-runtime",
                        {
                            "corejs": 3
                        }
                    ]
                ],
            }),
        ],
    };
    const bundle = await rollup(rollupConfig);
    outputBundle = bundle;
    return bundle;
}

I made these attempts and couldn't introduce Polyfill without polluting the global scope

build.js(SWC)

const buildBundle = async function buildBundle() {
    const rollupConfig = {
        input: paths.input,
        plugins: [
            sourcemaps(),
            commonjs(),
            nodeResolve({
                extensions,
            }),
            swc({
                rollup: {
                    exclude: /^(.+\/)?node_modules\/.+$/,
                },
            }),
        ],
    };
    const bundle = await rollup(rollupConfig);
    outputBundle = bundle;
    return bundle;
}

.swcrc(SWC)

{
    "jsc": {
        "parser": {
            "syntax": "typescript",
            "dynamicImport": true
        },
        "transform": {
            "regenerator": {
                "runtime": true
            }
        },
        "loose": true,
        "externalHelpers": true
    },
    "env": {
        "targets": [
            "last 2 versions",
            "> 1%",
            "iOS 8",
            "Android >= 4.4"
        ],
        "coreJs": 3
    }
}

I modified .swcrc

{
    "jsc": {
        "parser": {
            "syntax": "typescript",
            "dynamicImport": true
        },
        "transform": {
            "regenerator": {
                "runtime": true
            }
        },
        "loose": true,
        "externalHelpers": true
    },
    "env": {
        "targets": [
            "last 2 versions",
            "> 1%",
            "iOS 8",
            "Android >= 4.4"
        ],
        "mode": "usage",
        "coreJs": 3
    }
}

It provided such as Promise, Set and Map, those polluted the global scope.

In SWC, how do I introduce Polyfill without polluting the global scope

0

There are 0 best solutions below