webpack 里的 import, exports 實現原理

在使用 webpack 對腳本進行打包， 在開發中， 每個文件中都會使用 import 語句來導入一些功能，又會使用 export 語句導出一些功能，為了研究 import 和 export 原理，研究了 webpack 打包后的代碼，其實原理也是非常簡單：

webpack 對所有輸入文件都打包到一個文件中：

在最終的輸出文件中，webpack 會定義一個 Object 對象，這個對象中放入了所有的輸入文件的內容， 以文件名為 key, 文件內容（字符串）作為值，如：

var modules= {};

modules['index'] = "源代碼";

modules['hello'] = '源代碼';

 

當然，webpack 會對源代碼進行一定的修改, 會把 export 語句修改為 exports.變量 = 值， 這種方法， exports 是一個參數， 大概是這樣子的：

 

modules['index'] = (function(exports) {

　　// 代碼，放在一個私有域中。

　　// 通過 exports 對象，把需要公開的變量，函數，類公開出去。

　　exports.xx = xxx;

});

這就大概是一個源文件最終的結果，變成了一個函數，那么這個 exports 到底是個什么對象？其實 exports 就是一個 Object 對象，里面沒有任何其實內容，全部是函數中設置的內容，作用只是把對象傳遞到 import 語句：

先來看看 import 的語法： import xxx from 'filename'

import 語句， 最終大概會變成這樣：

var cmp1 = require('filename');

require 函數大概的實現：

function require(id) {

if(installedModules[id]) {

　　return installedModules[id].exports; // 返回 exports 對象

}

var module = installedModules[id] = {

      i: moduleId,

      l: false,

      exports: {} // 定義 exports 對象

 };

 

modules[id](module.exports); // 把 exports 參數傳遞到函數中

return module.exports; // 最后返回

}

 

不管 import xxx 語句中的 xxx 怎么設置， 最終都會變成一個變量，引用模塊的 exports 對象，然后通過這個變量來訪問變量，函數等：

import { a, b } from 'filename'

 

console.log(a);

console.log(b);

 

最終編譯的結果：

var cmp1 = require('filename');

console.log(cmp1.a);

console.log(cmp1.b);

 

最后， 文件傳統執行入口文件的代碼 require('index');