如何使用 fetch polyfill、rollup 和 typescript 创建 umd bundle？

Question

我正在尝试将库与汇总捆绑在一起。

在这个库中，我正在发出 http 请求。我想使用 fetch 并在节点上的代码为运行时使用 polyfill。我无法正确配置。要么它在节点上工作但在浏览器中不工作，要么相反。

这是我的配置文件的样子：

 module.exports = [{
    input: 'src/mylibrary.ts',
    output: {
      name: LIB_NAME,
      file: getOutputFileName(
        resolve(ROOT, pkg.browser),
        env === 'production'
      ),
      format: 'umd',
      globals: {
        fetch: 'cross-fetch',
      },
    },
    plugins: [
     typescript({
      useTsconfigDeclarationDir: true,
      tsconfigOverride: {
        allowJs: false,
        includes: ['src'],
        exclude: ['tests', 'examples', '*.js', 'scripts'],
        esModuleInterop: true,
      },
     }),
      nodeResolve({
        mainFields: ['jsnext', 'main'],
        preferBuiltins: true,
        browser: true,
      }),
      commonjs({
        include: ['node_modules/**'],
      }),
      json(),
      env === 'production' ? terser() : {}, // will minify the file in production mode
    ],
  }]

这是我在代码中导入 fetch 的方式：

import 'cross-fetch/polyfill'

在浏览器中效果很好 ✅

在节点中我有以下错误 ❌:

  throw new Error('unable to locate global object');
        ^

Error: unable to locate global object

当我查看捆绑的 umd 时，它来自这里：

var getGlobal = function () {
        // the only reliable means to get the global object is
        // `Function('return this')()`
        // However, this causes CSP violations in Chrome apps.
        if (typeof self !== 'undefined') { return self; }
        if (typeof window !== 'undefined') { return window; }
        if (typeof global !== 'undefined') { return global; }
        throw new Error('unable to locate global object');
    };

知道可能是什么问题吗？

Answer 1

我忘记在 external 键（第 2 行）中添加 cross-fetch

以下示例适用于我：

 {
    input: 'src/meilisearch.ts', // directory to transpilation of typescript
    external: ['cross-fetch', 'cross-fetch/polyfill'],
    output: {
      name: LIB_NAME,
      file: getOutputFileName(
        // will add .min. in filename if in production env
        resolve(ROOT, pkg.browser),
        env === 'production'
      ),
      format: 'umd',
      sourcemap: env === 'production', // create sourcemap for error reporting in production mode
    },
    plugins: [
     typescript({
      useTsconfigDeclarationDir: true,
       tsconfigOverride: {
        allowJs: false,
        includes: ['src'],
        exclude: ['tests', 'examples', '*.js', 'scripts'],
        esModuleInterop: true,
       },
      }),
      babel({
        babelrc: false,
        extensions: ['.ts'],
        presets: [
          [
            '@babel/preset-env',
            {
              modules: false,
              targets: {
                browsers: ['last 2 versions', 'ie >= 11'],
              },
            },
          ],
        ],
      }),
      nodeResolve({
        mainFields: ['jsnext', 'main'],
        preferBuiltins: true,
        browser: true,
      }),
      commonjs({
        include: ['node_modules/**'],
      }),
      json(),
      env === 'production' ? terser() : {}, // will minify the file in production mode
    ],
  },

如何使用 fetch polyfill、rollup 和 typescript 创建 umd bundle？

How to create umd bundle with fetch polyfill, rollup and typescript?

javascript

rollup

typescript