If I install both `@babel/runtime-corejs3` do I still need `core-js` as dependency?

Question

As title, I'm learning about babel and current I'm trying to understand @babel/plugin-transform-runtime, here are my current conclusions:

• From my settings of @babel/preset-env below, I will need to install core-js@3 as dependency.
• (I'm not sure) But since the @babel/plugin-transform-runtime will be applied first, which will extract those polyfillable APIs by referring require("@babel/runtime...") instead, and in there we still need to do the polyfills, so the @babel/runtime-corejs3, which is the dependency of @babel/plugin-transform-runtime, should include the core-js@3 or similars.

So I guess that the @babel/runtime-corejs3 should includes the core-js, so I don't need to install it. I have tested that if I remove the core-js from package.json, both the npm run server and npx babel src --out-dir dist can still be run without any error. So what are the essentials?

.babelrc.js:

const presets = [
    [
        "@babel/preset-env",
        {
            "useBuiltIns": "usage",
            "corejs": "3.13",
            "debug": true
        }
    ]
]

const plugins = [
    [
        "@babel/plugin-transform-runtime",
        { "corejs": 3 }
    ]
]

package.json:

{
    "name": "official-docs",
    "version": "1.0.0",
    "description": "",
    "main": "src/index.js",
    "scripts": {
        "server": "npx webpack serve",
        "build": "npx webpack --watch"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/cli": "^7.14.8",
        "@babel/core": "^7.14.8",
        "@babel/plugin-transform-arrow-functions": "^7.14.5",
        "@babel/plugin-transform-classes": "^7.14.9",
        "@babel/plugin-transform-computed-properties": "^7.14.5",
        "@babel/plugin-transform-runtime": "^7.15.0",
        "@babel/preset-env": "^7.14.9",
        "babel-loader": "^8.2.2",
        "html-webpack-plugin": "^5.3.2",
        "webpack": "^5.48.0",
        "webpack-cli": "^4.7.2",
        "webpack-dev-server": "^4.0.0"
    },
    "dependencies": {
        "@babel/runtime": "^7.15.3",
        "@babel/runtime-corejs2": "^7.15.3",
        "@babel/runtime-corejs3": "^7.15.3",
        "core-js": "^3.16.2",  // <------ I've tested removing this line.
        "jquery": "^3.6.0"
    }
}

test01.js:

function* bar() {}

let foo = () => {
    if ("foobar".includes("foo")) {
        return 2
    }
    return 1
}

class List {
    constructor(pi = 1, ps = 10) {
        this.pi = 1
        this.ps = 10
    }
    
    loadData() {
        
    }
    
    static genId() {
        return ++this.id
    }
    
}

let name = 'raining'


let obj = {
    baseName: name,
    [name + '_id']: 'baseName'
}

The output of npx babel src --out-dir dist:

@babel/preset-env: `DEBUG` option

Using targets:
{}

Using modules transform: auto

Using plugins:
  proposal-class-properties { }
  proposal-private-methods { }
  proposal-numeric-separator { }
  proposal-logical-assignment-operators { }
  proposal-nullish-coalescing-operator { }
  proposal-optional-chaining { }
  proposal-json-strings { }
  proposal-optional-catch-binding { }
  transform-parameters { }
  proposal-async-generator-functions { }
  proposal-object-rest-spread { }
  transform-dotall-regex { }
  proposal-unicode-property-regex { }
  transform-named-capturing-groups-regex { }
  transform-async-to-generator { }
  transform-exponentiation-operator { }
  transform-template-literals { }
  transform-literals { }
  transform-function-name { }
  transform-arrow-functions { }
  transform-block-scoped-functions { }
  transform-classes { }
  transform-object-super { }
  transform-shorthand-properties { }
  transform-duplicate-keys { }
  transform-computed-properties { }
  transform-for-of { }
  transform-sticky-regex { }
  transform-unicode-escapes { }
  transform-unicode-regex { }
  transform-spread { }
  transform-destructuring { }
  transform-block-scoping { }
  transform-typeof-symbol { }
  transform-new-target { }
  transform-regenerator { }
  transform-member-expression-literals { }
  transform-property-literals { }
  transform-reserved-words { }
  proposal-export-namespace-from { }
  transform-modules-commonjs
  proposal-dynamic-import
corejs3: `DEBUG` option

Using targets: {}

Using polyfills with `usage-global` method:
regenerator: `DEBUG` option

Using targets: {}

Using polyfills with `usage-global` method:

[.../babel-practice/official-docs/src/index.js]
Based on your code and targets, the corejs3 polyfill did not add any polyfill.

[.../babel-practice/official-docs/src/index.js]
Based on your code and targets, the regenerator polyfill did not add any polyfill.

[.../babel-practice/official-docs/src/test01.js]
Based on your code and targets, the corejs3 polyfill did not add any polyfill.

[.../babel-practice/official-docs/src/test01.js]
Based on your code and targets, the regenerator polyfill did not add any polyfill.
Successfully compiled 2 files with Babel (366ms).

Answer 1

No, you don't need to install a polyfill provider (in your case core-js@3) for @babel/runtime-corejs3. By its name, the exact purpose of it is to provide a pure-polyfilled version @babel/runtime.

Here to save the 3 years ago myself.