मैं रोलअप के साथ एक पुस्तकालय बंडल करने की कोशिश कर रहा हूँ।

इस पुस्तकालय में मैं 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

जब मैं बंडल किए गए उम में देखता हूं तो यह यहां से आता है:

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

कोई विचार क्या समस्या हो सकती है?

4
Bidoubiwa 26 अगस्त 2020, 12:06

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
    ],
  },
2
Couteau 21 सितंबर 2020, 12:03