Rollupjs模块未注册其模块

Question

我有一个gulp任务，它运行rollup，编译typescript，并为动态导入生成模块：

const rollup = require('rollup');
const rolltypescript = require('rollup-plugin-typescript');
const babel = require('rollup-plugin-babel');
const resolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');
const omt = require('@surma/rollup-plugin-off-main-thread');

function typescript() {
  return rollup.rollup({
    input: 'app/scripts/main.ts',
    plugins: [
      omt(),
      rolltypescript(),
      resolve(),
      commonjs(),
      babel({
        babelrc: false,
        presets: [['@babel/preset-env', { modules: false }]],
        plugins: ['@babel/plugin-syntax-dynamic-import']
      })
    ]
  }).then(bundle => {
    return bundle.write({
      dir: '.tmp/scripts/output',
      format: 'amd',
      name: 'library',
      sourcemap: true
    }).then(() => {
      return src('.tmp/scripts/output/main.js') // I did this because the path output was wrong. See: https://github.com/rollup/rollup/issues/2463
        .pipe($.replace(/require\(\['\.\//g, `require(['./scripts/output/`))
        .pipe(dest('.tmp/scripts'))
        .pipe(server.reload({ stream: true }));
    });
  });
};

此任务将正确生成所有文件，但我在浏览器控制台中收到错误消息

main.js:36 Uncaught (in promise) Error: Module ./scripts/output/file-0d52c3ae.js didn’t register its module
at singleRequire (main.js:36)
at async Promise.all (:9000/index 0)
at async require (main.js:43)

我不确定我现在应该做什么来修复这个错误。

Answer 1

我已经通过漂亮的Rich Harris shimport解决了我的问题

在HTML中，我这样做了：

<script src="/node_modules/shimport/index.js" data-main="scripts/lib/main.js"></script>

在gulpfile.js中，我将typescript任务转换为3个连续运行的任务(我使用的是gulp4)。编译现在被分配给gulp (gulp-typescript)，而不是rollup：

// $. is gulp-load-plugins: https://www.npmjs.com/package/gulp-load-plugins

function typescript() {
  return src('app/**/*.ts')
    .pipe($.typescript({
      target: 'ES5',
      module: 'esNext',
      moduleResolution: 'node',
      rootDir: 'app/scripts/lib',
      outDir: '/builder',
      allowSyntheticDefaultImports: true
    }))
    .pipe(dest('app/scripts/'));
}

function buildLib() {
  return src('app/scripts/lib/**/*.js')
    .pipe(dest('app/scripts/builder/'));
}

function scripts() {
  return rollup.rollup({
    input: 'app/scripts/builder/main.js',
    external: ['jquery', '$'],
    plugins: [
      resolve(),
      babel({
        babelrc: false,
        presets: [['@babel/preset-env', { modules: false }]],
        plugins: ['@babel/plugin-syntax-dynamic-import']
      })
    ]
  }).then(bundle => {
    return bundle.write({
      dir: '.tmp/scripts/lib',
      format: 'esm',
      name: 'lib',
      sourcemap: true,
      experimentalCodeSplitting: true,
      globals: {
        jquery: '$',
        $: 'jquery'
      }
    }).then(() => {
      return del(['app/scripts/builder']).then(() => {
        return src('.tmp/scripts/lib/main.js')
          .pipe(dest('.tmp/scripts'))
          .pipe(server.reload({ stream: true }));
      });
    });
  });
}

现在，所有文件都被编译并使用esNext放到/scripts/builder/文件夹中，因此所有导入都是原封不动的。然后rollupjs将转换文件以实现动态导入和与babel的兼容性。

最后，我删除了/scripts/builder/文件夹，因为它只用于创建新的有效文件，并且我将这三个文件作为一个序列执行：

// example
watch('app/scripts/**/*.ts', series(typescript, buildLib, scripts));
watch(['app/scripts/**/*.js', '!app/scripts/builder/**/*.js'], series(buildLib, scripts));

希望我已经帮助了某个人，如果你愿意贡献让这段代码变得更好，我真的很乐意:)

谢谢!