WEBPACK - 我如何要求原型功能？

Question

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

有什么基本的我做错了吗？

示例代码：（之前运行的WebPack）

app.js

function() { 


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

    require('./imports/module1.js'); 

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

    Audi.listing();  

})(); 

module1.js

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

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

的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 

Answer 1

代码中的一些问题：

1. 你module1不依赖于未声明的变量Car一个真正的模块。这就是报道错误的原因。

2. 另外module1试图对Cart（也就是在Car的原型上增加一个属性）产生副作用，这不是一个好的做法。做副作用是可以的，但最好在需要时明确设置，而不是通过模块加载。

3. 在Cars模块中，最好将require部分视为静态部分，而不是采取某种效果的方法。 （见本REF：http://webpack.github.io/docs/code-splitting.html#es6-modules）

改进建议和修正：

// 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 

而且不需要在IFFE其实模块，你可以摆脱它。