Rollupjs 模块没有注册它的模块

Question

我有一个 gulp 任务运行汇总、编译 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));

希望我对某人有所帮助，如果你愿意为改进此代码做出贡献，我真的很乐意:)

谢谢！

Rollupjs 模块没有注册它的模块

Rollupjs Module didn't register its module

typescript

gulp

amd

rollupjs