如何打包构建JavaScript文件？解决全局window依赖与ES6模块打包问题

Let's tackle your two issues first, then walk through a complete bundling solution using either Vite (simple, fast) or Webpack (flexible, configurable)—the most common tools for this use case.

1. Fix the Webfontloader Import Issue #

Your current import is incorrect because webfontloader exports a default object (not a named Webfont export), and you also have a capitalization mismatch.

Wrong: #

import { Webfont } from "webfontloader";

Correct: #

import WebFont from "webfontloader";

Now your WebFont.load() call will work as expected, since you're importing the full default export (and using the correct capitalization: WebFont, not Webfont).

2. Handle Files That Depend on the Global window Object #

ES6 modules run in a module scope, but in browser environments, window is still accessible as the global object. Most modern bundlers (Vite/Webpack) handle this automatically, but here's how to ensure it works smoothly:

• If your files directly reference window (e.g., window.innerWidth, window.myGlobalVar), no extra configuration is needed for browser-targeted builds.
• If you run into errors where window is "undefined" during bundling (common in Webpack's Node-based compilation), add a small config tweak to explicitly set window as the global object.

Option 1: Bundle with Vite (Recommended for Simplicity) #

Vite is built for modern frontend projects and requires minimal configuration.

Step 1: Set Up the Project #

In your project folder, run these commands:

npm init -y
npm install vite webfontloader --save-dev

Step 2: Fix Your Import (as shown above) #

Update the webfontloader import in your animation file to use the default export.

Step 3: Create an Entry File #

Create a main.js file to import all your animation modules:

// Import your split animation files
import "./animation-module-1.js";
import "./animation-module-2.js";
// Import your animate function
import { animate } from "./animate.js";

// Initialize your animation
animate("My Animated Text");

Step 4: Create an HTML File #

Create index.html and reference your entry file as a module:

<!DOCTYPE html>
<html>
<head>
  <title>My Frontend Animation</title>
</head>
<body>
  <script type="module" src="/main.js"></script>
</body>
</html>

Step 5: Run Development & Build #

• Start dev server:

  npx vite
  

  Your app will be available at http://localhost:5173 with hot reloading.
• Build for production:

  npx vite build
  

  This outputs optimized files to the dist folder, ready for deployment.

Handling Edge Cases with window in Vite #

If you have code that assumes window is available without explicit references, add a vite.config.js file to define window as a global:

import { defineConfig } from "vite";

export default defineConfig({
  define: {
    window: "window",
  },
});

Option 2: Bundle with Webpack (For Advanced Configuration) #

Webpack is more flexible for complex projects with custom build needs.

Step 1: Set Up the Project #

Run these commands to install dependencies:

npm init -y
npm install webpack webpack-cli webfontloader html-webpack-plugin --save-dev
# Optional: Add Babel if you need to support older browsers
npm install babel-loader @babel/core @babel/preset-env --save-dev

Step 2: Fix Your Import (as shown above) #

Update the webfontloader import in your animation file.

Step 3: Create Webpack Config #

Create webpack.config.js to configure bundling:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  entry: "./main.js", // Your entry file
  output: {
    filename: "bundle.[contenthash].js", // Caching-friendly filename
    path: path.resolve(__dirname, "dist"),
    globalObject: "window", // Ensure bundler uses window as global object
    clean: true, // Clean dist folder before each build
  },
  plugins: [
    // Generate HTML file with bundled script injected
    new HtmlWebpackPlugin({
      template: "./index.html", // Use your custom HTML template
      title: "My Frontend Animation",
    }),
  ],
  module: {
    rules: [
      // Optional: Transpile ES6+ to older JS with Babel
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  devServer: {
    static: "./dist",
    hot: true, // Enable hot reloading
  },
};

Step 4: Create Entry File & HTML #

Same as the Vite setup: create main.js to import your modules, and a basic index.html template.

Step 5: Run Development & Build #

• Start dev server:

  npx webpack serve --mode development
  

• Build for production:

  npx webpack --mode production
  

Final Notes #

• Always double-check that your split modules are properly imported using ES6 import/export syntax.
• For window-dependent code, avoid relying on implicit global variables—explicitly reference window when needed (e.g., window.myVar instead of just myVar) to make your code clearer and avoid bundling issues.

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