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

在使用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 没有成功吧。

阅读 3.8k
2 个回答

踩坑记录

需要手动安装 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: "node_modules/**",

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题