能否使用Webpack将单个JavaScript库编译为可通过<script>标签引入的独立JS文件？

Absolutely! You can absolutely use Webpack to package nebula.gl (and its necessary dependencies, if needed) into a standalone JavaScript file that you can drop into your project via a <script> tag. This is a common use case for Webpack, even if you're not using it to bundle your entire application. Let me walk you through exactly how to do this:

Step 1: Set up a temporary bundling project #

You don't need to modify your existing deck.gl project for this. Instead, create a small, separate project just to build the nebula.gl bundle:

1. Create a new folder and initialize npm:

   mkdir nebula-bundler && cd nebula-bundler
   npm init -y
   

2. Install nebula.gl and its peer dependencies:

   npm install nebula.gl deck.gl @deck.gl/core @deck.gl/layers react react-dom
   

3. Install Webpack and Babel (for transpiling modern JS):

   npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
   

Step 2: Configure Webpack #

Create a webpack.config.js file in your bundler folder with this configuration. The key here is setting up a UMD bundle that exposes nebula.gl's components globally:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'nebula-gl.min.js',
    // Expose the bundle as a global variable named `nebulaGl`
    library: 'nebulaGl',
    libraryTarget: 'umd',
    globalObject: 'this'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  },
  // Optional: If your existing project already loads React, deck.gl via CDN, exclude them from the bundle
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
    '@deck.gl/core': 'deck',
    '@deck.gl/layers': 'deck'
  },
  mode: 'production'
};

The externals section is important if you're already loading React and deck.gl via <script> tags in your main project. It tells Webpack not to bundle those libraries into your nebula.gl file—instead, it will assume they exist as global variables (React, ReactDOM, deck) in the browser.

Step 3: Create the entry file #

Make a src folder and create src/index.js to export the nebula.gl components you need (like EditableGeoJsonLayer from your example):

// Import the components you need from nebula.gl
import { EditableGeoJsonLayer } from 'nebula.gl';

// Attach them to the global window object so they're accessible after script loading
window.nebulaGl = {
  EditableGeoJsonLayer
  // Add other nebula.gl components here if you need them later
};

Step 4: Build the bundle #

Add a build script to your package.json:

{
  "scripts": {
    "build": "webpack --mode production"
  }
}

Run the build command:

npm run build

You'll find your bundled file at dist/nebula-gl.min.js.

Step 5: Use the bundle in your existing project #

Drop the bundled file into your project and add it via a <script> tag after React and deck.gl (if you used externals):

<!-- Load React and ReactDOM from CDN first -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<!-- Load deck.gl -->
<script src="https://unpkg.com/deck.gl@8.8.0/dist.min.js"></script>
<!-- Load your bundled nebula.gl -->
<script src="path/to/nebula-gl.min.js"></script>

Now you can use the EditableGeoJsonLayer in your deck.gl code just like in the example, accessing it via the global nebulaGl object:

const editableLayer = new nebulaGl.EditableGeoJsonLayer({
  id: 'editable-layer',
  data: yourGeoJsonData,
  // ... other layer props from the example
});

// Add it to your deck.gl instance
deck.setProps({ layers: [editableLayer] });

Clarifying your Webpack question #

You're not misunderstanding Webpack! Webpack is often used for full application bundling, but it's equally capable of packaging individual libraries or subsets of dependencies into standalone files. This approach lets you avoid overhauling your existing project's build process while still getting access to nebula.gl's features.

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