Webpack打包项目中基于字符串函数名动态调用函数失败求助

问题描述 #

尝试通过window对象的括号表示法，基于按钮文本拼接的函数名动态调用函数，同时试过eval()、new Function，均未成功。项目通过Webpack打包，点击按钮时收到错误：

Uncaught TypeError: window[element.textContent] is not a function at HTMLButtonElement

补充：用VS Code live-server运行问题依旧，但将所有JS合并为一个文件本地打开HTML时功能正常。

相关代码 #

JS代码 #

import populateAboutPage from "./aboutPage.js";
import populateMenuPage from "./menuPage.js";
import populateContactPage from "./contactPage.js";

const btns = document.querySelectorAll(".btn");

btns.forEach((element) => {
  element.addEventListener("click", () => {
    // Dynamically call the function based on button text content
    window[`populate${element.textContent}Page`]();
  });
});

HTML代码 #

<nav class="nav-btns">
        <button class="btn">About</button>
        <button class="btn">Menu</button>
        <button class="btn">Contact</button>
</nav>

webpack.config代码 #

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

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
      },
    ],
  },
  devtool: "inline-source-map",
  node: {
    global: true,
  },
  devServer: {
    static: "./dist",
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Restaurant Page",
      template: "./src/index.html",
    }),
  ],
  optimization: {
    runtimeChunk: "single",
  },
};

解决方案 #

方法1：创建函数映射表（推荐） #

用对象手动关联按钮文本和对应函数，避免全局作用域污染，同时解决模块作用域问题：

import populateAboutPage from "./aboutPage.js";
import populateMenuPage from "./menuPage.js";
import populateContactPage from "./contactPage.js";

// 建立按钮文本与函数的映射
const funcMap = {
  About: populateAboutPage,
  Menu: populateMenuPage,
  Contact: populateContactPage
};

const btns = document.querySelectorAll(".btn");

btns.forEach((element) => {
  element.addEventListener("click", () => {
    const targetFunc = funcMap[element.textContent];
    // 先判断是否为有效函数再调用，避免报错
    if (typeof targetFunc === "function") {
      targetFunc();
    }
  });
});

方法2：显式挂载函数到window对象（不推荐） #

如果坚持要通过window访问，需手动把导入的函数挂载到全局对象上：

import populateAboutPage from "./aboutPage.js";
import populateMenuPage from "./menuPage.js";
import populateContactPage from "./contactPage.js";

// 将函数挂载到全局window
window.populateAboutPage = populateAboutPage;
window.populateMenuPage = populateMenuPage;
window.populateContactPage = populateContactPage;

const btns = document.querySelectorAll(".btn");

btns.forEach((element) => {
  element.addEventListener("click", () => {
    const funcName = `populate${element.textContent}Page`;
    if (typeof window[funcName] === "function") {
      window[funcName]();
    }
  });
});

问题根源 #

Webpack默认将代码打包在模块作用域内，导入的函数属于局部变量，不会自动成为window的属性。而直接用window[funcName]查找时，全局作用域里没有这些函数，所以报错。

当你把所有JS合并到一个文件本地打开时，代码运行在全局作用域，函数会自动挂载到window，因此能正常调用。eval()和new Function失效也是同理：它们只能访问全局作用域，无法获取Webpack模块内的局部函数。

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