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其實模塊，你可以擺脫它。