javascript - rollup+babel使用polyfill不生效Unresolved dependencies?

Question

在使用rollup+babel打包es6代码做polyfill生成兼容老IE版本的代码时，polyfill未生效，报Unresolved dependencies警告。

我谷歌和参考过 https://segmentfault.com/q/1010000042335568 配置 @rollup/plugin-node-resolve 还是未成功，希望有大佬帮忙看看非常感谢，示例仓库demo地址如下：
https://github.com/NEOTSO/rollup-polyfill-demo

src/index.js → dist/umd.js...
(!) Unresolved dependencies
https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
core-js/modules/es.string.starts-with.js (imported by "src/index.js")
core-js/modules/es.array.includes.js (imported by "src/index.js")

• rollup.config.js

import { babel } from "@rollup/plugin-babel";
import commonjs from "@rollup/plugin-commonjs";
import { nodeResolve } from "@rollup/plugin-node-resolve";

export default {
    input: "src/index.js",
    output: {
        file: "dist/umd.js",
        format: "umd",
    },
    plugins: [nodeResolve(), commonjs(), babel({ babelHelpers: "bundled" })],
};

• babel.config.json

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "ie": "8"
                },
                "useBuiltIns": "usage",
                "corejs": "3"
            }
        ]
    ]
}

• src/index.js

console.log("123".startsWith(1));
console.log([1, 2, 3].includes(1));

• dist/umd.js

(function (factory) {
    typeof define === 'function' && define.amd ? define(['core-js/modules/es.string.starts-with.js', 'core-js/modules/es.array.includes.js'], factory) :
    factory();
})((function () { 'use strict';

    console.log("123".startsWith(1));
    console.log([1, 2, 3].includes(1));

}));

这部分 define(['core-js/modules/es.string.starts-with.js', 'core-js/modules/es.array.includes.js'] 应该是 polyfill 没有成功吧。

Answer 1

踩坑记录

需要手动安装 npm install core-js@3 --save
详见文档：
https://babeljs.io/docs/babel-preset-env#usebuiltins

打包时后续还弹出一个警告：

(!) Circular dependencies
node_modules/core-js/modules/es.string.starts-with.js -> node_modules/core-js/modules/es.string.starts-with.js
M:\Work\TSO\rollup-demo\node_modules\core-js\internals\export.js?commonjs-proxy -> node_modules/core-js/internals/export.js -> M:\Work\TSO\rollup-demo\node_modules\core-js\internals\global.js?commonjs-proxy -> node_modules/core-js/internals/global.js -> node_modules/core-js/modules/esnext.global-this.js ->

解决方案:

rollup.config.js中babel插件添加 exclude 配置

plugins: [nodeResolve(), commonjs(), babel({ babelHelpers: "bundled", exclude: ['core-js'], })],

Edge模拟IE测试ok，安心去吃饭了，哎。

Answer 2

这里提供两个例子：
https://sourcegraph.com/github.com/TanStack/form/-/blob/rollu...
https://sourcegraph.com/github.com/TanStack/query/-/blob/roll...

再提供一个搜索的链接：https://sourcegraph.com/search?q=context%3Aglobal+rollup.conf...