मैं एक बिल्ड से कुछ वैकल्पिक कोड को हटाने के लिए अपने स्वयं के कस्टम प्लगइन का उपयोग कर रहा हूं। यह अच्छी तरह से काम करता है, लेकिन किसी कारण से ऐसा लगता है कि यह स्रोत मानचित्रों की पीढ़ी को अवरुद्ध कर रहा है।

मेरा सबसे अच्छा अनुमान यह है कि तथ्य यह है कि मैं index.js आउटपुट फ़ाइल को संशोधित कर रहा हूं, उस फ़ाइल के लिए नक्शा बनाने की क्षमता में हस्तक्षेप करता है। अगर मैं प्लगइन पर टिप्पणी करता हूं, तो मेरे स्रोत मानचित्र वापस आ जाते हैं।

क्या प्लगइन निष्पादन के क्रम को बदलने के लिए शायद मैं कुछ कर सकता हूं जो इसे ठीक करेगा? या शायद उत्पन्न आउटपुट के बजाय स्रोत फ़ाइल इनपुट स्ट्रीम (फ़ाइलों से स्वयं नहीं) से कोड स्ट्रिप करने का एक तरीका?

मैंने अपने प्लगइन्स में स्पष्ट रूप से SourceMapDevToolPlugin जोड़ने का प्रयास किया है, लेकिन इससे कोई फायदा नहीं हुआ।

यहाँ मेरी webpack.config.cjs फ़ाइल है:

const { Compilation, sources } = require('webpack');
const { resolve } = require('path');

module.exports = env => {
  const esVersion = env?.esver === '5' ? 'es5' : 'es6';
  const dir = env?.esver === '5' ? 'web5' : 'web';
  const chromeVersion = env?.esver === '5' ? '23' : '51';

  // noinspection JSUnresolvedVariable,JSUnresolvedFunction,JSUnresolvedFunction
  return {
    mode: env?.dev ? 'development' : 'production',
    target: [esVersion, 'web'],
    entry: {
      index: './dist/index.js'
    },
    output: {
      path: resolve(__dirname, 'dist/' + dir),
      filename: `index.js`,
      libraryTarget: 'umd',
      library: 'tbTime'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: 'babel-loader',
            options: { presets: [['@babel/preset-env', { targets: { chrome: chromeVersion } }]] }
          },
          resolve: { fullySpecified: false }
        }
      ]
    },
    resolve: {
      mainFields: ['esm2015', 'es2015', 'module', 'main', 'browser']
    },
    externals: { 'by-request': 'by-request' },
    devtool: 'source-map',
    plugins: [
      new class OutputMonitor {
        // noinspection JSUnusedGlobalSymbols
        apply(compiler) {
          compiler.hooks.thisCompilation.tap('OutputMonitor', (compilation) => {
            compilation.hooks.processAssets.tap(
              { name: 'OutputMonitor', stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE },
              () => {
                const file = compilation.getAsset('index.js');
                let contents = file.source.source();
                // Strip out dynamic import() so it doesn't generate warnings.
                contents = contents.replace(/return import\(.*?\/\* webpackIgnore: true \*\/.*?tseuqer-yb.*?\.join\(''\)\)/s, 'return null');
                // Strip out large and large-alt timezone definitions from this build.
                contents = contents.replace(/\/\* trim-file-start \*\/.*?\/\* trim-file-end \*\//sg, 'null');
                compilation.updateAsset('index.js', new sources.RawSource(contents));
              }
            );
          });
        }
      }()
    ]
  };
};

पूरा प्रोजेक्ट स्रोत यहां पाया जा सकता है: https://github.com/kshetline/tubular_time/tree/ विकास

1
kshetline 26 जिंदा 2021, 07:42

1 उत्तर

सबसे बढ़िया उत्तर

मुझे लगता है कि RawSource का उपयोग करने से स्रोत मानचित्र अक्षम हो जाएगा। devtool के लिए सही SourceMapSource माना जाता है, इसलिए यह विचार निम्न जैसा दिखता है:

const file = compilation.getAsset('index.js');

const {devtool} = compiler.options;

let contents = file.source.source();
const {map} = file.source.sourceAndMap();

// your replace work
// ...

compilation.updateAsset(
  'index.js', 
  devtool
    // for devtool we have to pass map file but this the original one
    // it would be wrong since you have already changed the content 
    ? new sources.SourceMapSource(contents, 'index.js', map)
    : new sources.RawSource(contents)
);

2
tmhao2005 26 जिंदा 2021, 10:59
टिप के लिए धन्यवाद!
 – 
Hrimiuc Paul
21 जुलाई 2021, 14:11