[TOC] 手寫 CommonJS 的簡單實現 # 示例 `a.js`： ~~~javascript const fn = function () { console.log('Hello'); } module.exports = fn; ~~~ # 第一種 ~~~js let fs = require('fs') //common.js規范實現（node中） let a = req('./a.js') function req(moduleName){ let content = fs.readFileSync(moduleName, 'utf-8') //下面是創建一個字符串函數 let fn = new Function('exports','module', 'require', '__dirname', '__filename', content + '\n return module.exports' ); //構造一個module對象，用于給module.exports賦值 let module = { exports:'' } //這里傳入req是由于req的文件里面可能require其他文件 return fn(module.exports,module,req,__dirname,__filename) } /* * fn函數注釋 */ // function fn(exports,module, require, __dirname, __filename){ // //let content = fs.readFileSync(moduleName, 'utf-8')執行結果是字符串 // module.exports = '我的第一個webpack' // return module.exports // } console.log(a) ~~~ # 第二種 ```js const path = require('path'); const fs = require('fs'); const vm = require('vm'); // Module處理 function Module(id) { this.id = id; this.exports = {}; }; // 緩存 Module.cache = {}; // 不同后綴類型處理 Module.extensions = {}; Module.extensions['.js'] = function (module) { let script = fs.readFileSync(module.id, 'utf8'); const wrapper = `(function (exports, require, module, __dirname, __filename) {${script}})`; const fn = vm.runInThisContext(wrapper); fn(module.exports, req, module, __dirname, __filename); return module.exports; }; Module.extensions['.json'] = function (module) { let jsonContent = fs.readFileSync(module.id, 'utf8'); return JSON.parse(jsonContent); }; Module.getPath = function (id) { const absPath = path.resolve(id); if (fs.existsSync(absPath)) { return absPath; } const extensions = Object.keys(Module.extensions); for (let i = 0; i < extensions.length; i++) { const extPath = `${absPath}${extensions[i]}`; if (fs.existsSync(extPath)) { return extPath; } } throw new Error('The file do not exist'); } const req = (id) => { const ext = Module.getPath(id); if (Module.cache[ext]) { return Module.cache[ext]; } const myModule = new Module(ext); // 對應后綴方法執行 const result = Module.extensions[path.extname(ext)](myModule); Module.cache[ext] = myModule; return result; }; //以下是使用req的代碼塊 const func = req('./b'); func(); // Hello ``` > [手寫 commonJs](https://www.javascriptcn.com/read-103959.html)