如何使用 rollup 将外部依赖项捆绑到我的 javascript 文件

Question

概述： 我正在用打字稿编写一个插件，目的是支持尽可能多的浏览器。它将通过单个脚本标签从 CDN 提供服务。

我使用 Rollup 作为捆绑器，使用 @babel/preset-env。

{
input: "./src/plugin/index.ts",
output: [
  {
    dir: "build",
    format: "system",
  }
],
plugins: [
  typescript({
    tsconfig: './tsconfig.json'
  }), 
  resolve(), 
  nodePolyfills(), 
  babel({ 
    babelHelpers: 'bundled' 
  }),
  terser({
    format: {
      comments: false,
    },
    compress: {
      drop_console: true,
    }
  }),
]},

1. 我是否需要生成系统模块文件以获得最佳的浏览器兼容性？

2. 如果是，我如何才能以特定顺序将此 system.js 和所需的 polyfill 捆绑到我的插件中？

按特定顺序需要的 Polyfill：

<script src="./node_modules/@webcomponents/webcomponentsjs/src/entrypoints/custom-elements-es5-adapter.js"></script>    
<script src="./node_modules/@webcomponents/webcomponentsjs/src/entrypoints/webcomponents-loader.js"></script>

到目前为止我已经尝试过：

我尝试在我的index.js文件顶部导入system.js，它似乎被捆绑在一起，但是当我运行它时，浏览器出现系统js未定义错误。

我正在尝试实现一个有效的解决方案，或者有更好的解决方案，例如从 CDN 动态加载所有内容？我不想最终得到大量的捆绑:(

谢谢

Answer 1

为了实现最佳的浏览器兼容性，生成系统模块文件是一个可靠的选择，因为它跨不同环境的广泛支持。使用 Rollup，您可以将外部依赖项直接捆绑到输出文件中。确保您的

rollup.config.js

包含正确的插件，例如用于解析节点模块的

@rollup/plugin-node-resolve

和用于将 CommonJS 模块转换为 ES6 的

@rollup/plugin-commonjs

，以便它们可以包含在捆绑包中。对于特定的 polyfill 排序，请在主脚本之前手动将它们包含在 html 中，或者按照所需的顺序将它们显式导入到入口点中。此设置应有效涵盖捆绑和订购的 Polyfill。