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

Question

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

\n

在这个库中，我正在发出 http 请求。\n我想使用fetch并在代码在节点上运行时使用 polyfill。\n我无法获得正确的配置。\n它可以在节点上运行，但不能在浏览器，或相反。

\n

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

\n

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

\n

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

\n

import \'cross-fetch/polyfill\'\n

\n

在浏览器中它工作得很好 \xe2\x9c\x85

\n

在节点中，我有以下错误 \xe2\x9d\x8c：

\n

  throw new Error(\'unable to locate global object\');\n        ^\n\nError: unable to locate global object\n

\n

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

\n

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

\n

知道可能是什么问题吗？

\n

Answer 1

我忘记添加cross-fetch密钥external（第 2 行）

以下示例对我有用：

 {
    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
    ],
  },