Javascript 网页包-如何要求原型功能？

我最近刚开始将Webpack作为未来jQuery插件的模块加载器，但在尝试将单个原型函数分离到单独的文件中时遇到了问题Webpack似乎正在将原型函数导入单独的IFFS中，这反过来又给了我一个控制台错误

我做错什么了吗

示例代码：（在运行Web包之前）

app.js

模块1.js

WEBPACK snippit

/******/ ([
/* 0 */
/***/ (function(module, exports) {

// Module 1
console.log("Module 1");

Cars.prototype.listing = function() {
        console.log(this.year + ", " + this.color + ", " + this.make + ", with " + this.doors + " doors");
}

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {


(function() {


    var Cars = function(color, doors, year, make) {
        this.color = color;
        this.doors = doors;
        this.year = year;
        this.make = make;
    }

    __webpack_require__(0);

    var Audi = new Cars("red", 5, 2001, "Audi");

    Audi.listing();



})();


/***/ })
/******/ ]);

控制台错误

Uncaught ReferenceError: Cars is not defined
    at Object.make.color (module1.js:4)
    at __webpack_require__ (bootstrap 91cca6f…:19)
    at app.js:12
    at Object.<anonymous> (app.js:20)
    at __webpack_require__ (bootstrap 91cca6f…:19)
    at bootstrap 91cca6f…:65
    at bootstrap 91cca6f…:65

Uncaught ReferenceError:未定义车辆
在Object.make.color（module1.js:4）
at\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
app.js:12
反对。（app.js:20）
at\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
在引导91cca6f时…：65
在引导91cca6f时…：65

代码中的一些问题：

您的

module1

不是依赖于未声明变量

Car

的实际模块。这就是报告错误的原因

另外，

module1

试图对

Cart

产生副作用（即在汽车原型上增加一个属性），这不是一个好的做法。产生副作用是可以的，但最好在需要时显式设置，而不是通过模块加载

在

Cars

模块中，最好将

require

部分视为静态部分，而不是采取某种效果的方法。（参见本参考文件：）

建议的改进和修复：

// module 1
module.exports = {
  list: function list() { /* .... */ }
}

// Cars

// require, no effect;
var module1 = require('./module1')
function Cars() {
  // code
}

// Take effect. via extending. I used underscore, you can use whatever    extending methods such as $.extend
_.extend(Cars.prototype, module1}

//....other code

---

此外，如果模块中不需要，您可以将其删除。

谢谢，这更有意义。两个问题，当提到.extend方法时，你是指jQuery方法还是webpack有自己的extend方法？你还提到了IFFE，我的计划是将webpack与我的jQuery插件一起使用。目前我使用jQuery样板模式，这依赖于IFFE来限制范围。很高兴@FrederickM.Rogers。对于extend，我指的是基本上从一个对象到原始对象添加/覆盖属性的扩展。对于IFFE，它在webpack中是不需要的，基本上IFFE的目标是运行一次代码，这意味着需要一个模块。如果所有的插件都是你的，你可以用对象的方式写出来，并在一个更干净的地方扩展它们。再次感谢你，我会试试看结果如何。

Uncaught ReferenceError: Cars is not defined
    at Object.make.color (module1.js:4)
    at __webpack_require__ (bootstrap 91cca6f…:19)
    at app.js:12
    at Object.<anonymous> (app.js:20)
    at __webpack_require__ (bootstrap 91cca6f…:19)
    at bootstrap 91cca6f…:65
    at bootstrap 91cca6f…:65

// module 1
module.exports = {
  list: function list() { /* .... */ }
}

// Cars

// require, no effect;
var module1 = require('./module1')
function Cars() {
  // code
}

// Take effect. via extending. I used underscore, you can use whatever    extending methods such as $.extend
_.extend(Cars.prototype, module1}

//....other code