Webpack打包JS时向全局命名空间bb追加类报bb.Point is not a constructor如何解决

问题根源 #

你遇到的报错是两个原因共同导致的：

• Test.js 中你定义了立即执行函数表达式（IIFE）但没有实际调用，函数内部挂载bb.Point的逻辑从头到尾没有执行
• Webpack 环境下所有文件默认是模块作用域，你在Main.js中用var声明的bb是当前模块的私有变量，不会自动挂载到全局对象上，Test.js中读取global.bb拿不到你在Main.js中定义的bb对象

修复步骤 #

1. 修改Main.js，确保bb挂载到全局对象 #

把var声明改为直接挂载到window（浏览器环境全局对象）：

window.bb = window.bb || { version: '1.0.0' };
require('./js/Test'); 
var point = new bb.Point(12,13);

2. 修改Test.js，补全IIFE的调用 #

你写的IIFE只有函数定义部分，需要在末尾添加(window)传入全局对象并触发执行：

(function(global) {
    'use strict';

    var bb = global.bb || (global.bb = { });

    console.log(bb);

    if (bb.Point) {
        console.log('bb.Point is already defined');
        return;
    }

    bb.Point = Point;


    function Point(x, y) {
        this.x = x;
        this.y = y;
    }

    Point.prototype = {

        type: 'point',

        constructor: Point,

        setXY: function (x, y) {
            this.x = x;
            this.y = y;
            return this;
        },
    };
})(window); // 补全这一行，传入全局对象并执行函数

更适配Webpack的优化方案（可选） #

既然已经使用Webpack做模块化打包，不需要强行用全局命名空间的写法，更推荐用标准ES模块的导入导出逻辑，避免全局污染：

1. Test.js 直接导出Point类：

export default function Point(x, y) {
    this.x = x;
    this.y = y;
}

Point.prototype = {
    type: 'point',
    constructor: Point,
    setXY: function (x, y) {
        this.x = x;
        this.y = y;
        return this;
    },
};

2. Main.js 直接导入使用：

import Point from './js/Test';
var point = new Point(12,13);

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