如何使用 rollup.js 动态导入 JavaScript ES 模块？

Question

我尝试使用带有后备包的 JS ES 模块，由 rollup.js 生成。

标准import没有问题。但是我有动态导入的问题。

我在这里上传了完整的设置示例：https : //www.file-upload.net/download-13588759/gulp-setup-example.zip.html

Run:
1. yarn install
2. gulp test

The setup of the gulpfile.babel.js is:

import buffer from 'vinyl-buffer';
import gulp from 'gulp';
import loadPlugins from 'gulp-load-plugins';
import rollup from 'rollup-stream';
import rollupPluginBabel from 'rollup-plugin-babel';
import source from 'vinyl-source-stream';

const $_ = loadPlugins();

/*
 * JavaScript
 */
function processJavaScriptMain() {
  return rollup({
    input: 'src/main.mjs',
    format: 'es',
    sourcemap: true,
    plugins: [
      rollupPluginBabel({
        exclude: 'node_modules/**',
      }),
    ],
  })
  .pipe(source('main.mjs', 'src')) // Bundle name
  .pipe(buffer())
  .pipe($_.sourcemaps.init({loadMaps: true}))
  //.pipe($_.terser())
  .pipe($_.rename('main.bundle.js'))
  .pipe($_.sourcemaps.write('.'))
  .pipe(gulp.dest('dist/'));
}

gulp.task('test', processJavaScriptMain);

.babelrc:

{
  "presets": [
    [
      "@babel/env"
    ]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"
  ]
}

And the file main.js is the entry point for the bundle and contains:

{
  "presets": [
    [
      "@babel/env"
    ]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"
  ]
}

The documentation from rollup.js says that dynamic imports should be possible.

In the code from above the 1. example result in the error:

Error: Unexpected token
    at error (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:185:14)
    at Module.error (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:8170:3)
    at tryParse (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:7888:10)
    at new Module (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:7924:15)
    at load.catch.then.then.then.source (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:9749:20)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:189:7)

The second example (like in the rollup.js docs) result in the error:

Error: 'import' and 'export' may only appear at the top level
    at error (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:185:14)
    at Module.error (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:8170:3)
    at tryParse (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:7888:10)
    at new Module (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:7924:15)
    at load.catch.then.then.then.source (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:9749:20)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:189:7)

I expected, that the content of the dynamic imports is in some kind inline within the bundle or something like extracted into a different bundle.

What do I do wrong?