Как JavaScript ES модули динамического импорта с rollup.js? - PullRequest
Новая
       55

Как JavaScript ES модули динамического импорта с rollup.js?

1 голос
/ 30 апреля 2019

Я пытаюсь использовать JS ES-модули с резервным пакетом , сгенерированным rollup.js.

Стандарт import s не проблема.Но у меня есть проблема с динамическим импортом.

Я загрузил полный пример установки здесь: 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 говорится , что динамическийимпорт должен быть возможен .

В коде сверху 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)

Я ожидал, что содержимоединамического импорта в каком-то виде встроен в пакет или что-то вроде извлечено в другой пакет.

Что я делаю не так?

...