Блог

Я пытаюсь объединить библиотеку с rollup.

В этой библиотеке я делаю http-запросы. Я хотел бы использовать fetch и использовать полизаполнение при запуске кода на узле. Я не могу правильно настроить конфигурацию. Либо это работает на узле, но не в браузере, либо наоборот.

Вот как выглядит мой конфигурационный файл:

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

  

Это то, как я импортирую выборку в свой код :

 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');
    };
  

Есть идеи, в чем может быть проблема?

Я забыл добавить 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
    ],
  },