在Debian打包d3-color时，如何用Webpack替代Rollup的-g参数？

Let's break down exactly how to map that Rollup flag to Webpack, since you're working on packaging d3-interpolate for Debian and need to replace Rollup with Webpack.

First, let's clarify what Rollup's -g d3-color:d3 does: it tells Rollup to exclude d3-color from the bundle and instead expect it to be available as a global variable d3 in the browser environment. For other module formats (CommonJS/AMD), it still references the module by its package name d3-color.

Here's how to replicate this behavior in Webpack:

1. Configure externals to Exclude d3-color #

Webpack's externals option is the direct equivalent of Rollup's -g (globals) flag. It tells Webpack not to bundle the specified module, and instead resolve it from the environment's global scope or module system.

Add this to your Webpack config:

externals: {
  'd3-color': {
    root: 'd3',        // Browser: use the global `window.d3` object
    commonjs: 'd3-color', // CommonJS: require('d3-color')
    commonjs2: 'd3-color', // CommonJS2 (Node.js): require('d3-color')
    amd: 'd3-color'    // AMD: define(['d3-color'], ...)
  }
}

This matches exactly what rollup -g d3-color:d3 does: for browser UMD builds, it pulls d3-color from the global d3 variable, while respecting module systems for other environments.

2. Match Rollup's UMD Output Settings #

Your Rollup command specifies -f umd -n d3 -o build/d3-interpolate.js — we need to mirror these in Webpack's output section:

output: {
  filename: 'd3-interpolate.js',
  path: path.resolve(__dirname, 'build'),
  library: 'd3',          // Expose the bundle as global variable `d3` (matches Rollup's `-n d3`)
  libraryTarget: 'umd',   // Generate UMD format (matches Rollup's `-f umd`)
  globalObject: 'this'    // Fixes UMD compatibility across Node.js and browsers
}

3. Add the Banner (Equivalent to Rollup's --banner) #

Rollup uses --banner "$(preamble)" to add a header comment to the bundle. In Webpack, use the BannerPlugin to replicate this:
First, make sure you have fs imported to read your preamble file (or hardcode the content if needed):

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');

// ... rest of config

plugins: [
  new webpack.BannerPlugin({
    banner: fs.readFileSync(path.resolve(__dirname, 'preamble.txt'), 'utf8'),
    raw: true // Ensures the banner is added as-is (without extra escaping)
  })
]

Why Your Browserify Shim Approach Didn't Work #

Browserify's global shims (like using browserify-shim) are designed to inject global variables into modules as if they were imported. But that's the opposite of what you need here: you don't want to inject d3 into your bundle — you want to exclude d3-color entirely and rely on the global d3 existing in the environment. Webpack's externals is the correct tool for this, not shimming.

Full Webpack Config Example #

Putting it all together, your config should look like this:

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'd3-interpolate.js',
    path: path.resolve(__dirname, 'build'),
    library: 'd3',
    libraryTarget: 'umd',
    globalObject: 'this'
  },
  externals: {
    'd3-color': {
      root: 'd3',
      commonjs: 'd3-color',
      commonjs2: 'd3-color',
      amd: 'd3-color'
    }
  },
  plugins: [
    new webpack.BannerPlugin({
      banner: fs.readFileSync(path.resolve(__dirname, 'preamble.txt'), 'utf8'),
      raw: true
    })
  ]
};

This config will generate a UMD bundle that behaves exactly like the Rollup one you're replacing: it excludes d3-color, expects it to be available as global d3 in browsers, and matches the output filename and banner requirements.

内容的提问来源于stack exchange，提问作者j4v4m4n