Question

我尝试使用由rollup.js生成的JS ES modules with a fallback bundle。

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

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

运行：
1. yarn install
2. gulp test

gulpfile.babel.js的设置为：

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"
  ]
}

文件main.js是捆绑软件的入口，其中包含：

import {demoUtil2} from './modules/utils.mjs';

// Work
console.log('demoUtil', demoUtil2());

// 1. example: Doesn't work
(async () => {
  const someCondition = true;
  if (someCondition) {
    const Demo = await import('./modules/Demo.mjs');
    new Demo();
  }
})();

// -----

// 2. example: Doesn't work ether
const someCondition  = true;
if (someCondition ) {
  import('./modules/Demo.mjs').then(({ default: DefaultExport, NamedExport })=> {
    console.log('hit');
  });
}

rollup.js的文档说that dynamic imports should be possible。

在 1上方的代码中。示例导致错误：

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)

第二个示例（如rollup.js文档中）导致错误：

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)

我希望动态导入的内容以某种内联形式出现在捆绑软件中，或者类似地提取到另一个捆绑软件中。

我该怎么办？

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

0 个答案: