webpack-Bundler源码编写（生成代码）

接下来我们要生成真正可以在浏览器中运行的代码：

const makeDependenciesGraph=entry=>{
    ...
}
const generateCode=entry=>{
    const graph=JSON.stringify(makeDependenciesGraph(entry));
    return `
        (function(graph)){}(${graph});
    `;
}

const code=generateCode('./src/index.js');
console.log(code);

输出：

(function(graph)){}({"./src/index.js":{"dependencies":{"./message.js":"src/message.js"},"code":"\"use strict\";\n\nvar _message = _interopRequireDefault(require(\"./message.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nconsole.log(_message[\"default\"]);"},"src/message.js":{"dependencies":{"./word.js":"src/word.js"},"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports[\"default\"] = void 0;\n\nvar _word = require(\"./word.js\");\n\nvar message = \"say \".concat(_word.word);\nvar _default = message;\nexports[\"default\"] = _default;"},"src/word.js":{"dependencies":{},"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.word = void 0;\nvar word = 'hello';\nexports.word = word;"}});

以上代码中含有require、exports等浏览器不支持的语法，还不能正确执行，所以我们还需要构造require函数和exports对象：

const generateCode=entry=>{
    const graph=JSON.stringify(makeDependenciesGraph(entry));
    return `
        (function(graph){
            function require(module){
                function localRequire(relativePath){
                    return require(graph[module].dependencies[relativePath])
                }
                var exports={};
                (function(require,exports,code){
                    eval(code);
                })(localRequire,exports,graph[module].code);
                return exports
            };
            require('${entry}');
        })(${graph});
    `;
}

const code=generateCode('./src/index.js');
console.log(code);

输出：

(function(graph){
    function require(module){
        function localRequire(relativePath){
            return require(graph[module].dependencies[relativePath])
        }
        var exports={};
        (function(require,exports,code){
            eval(code);
        })(localRequire,exports,graph[module].code);
        return exports
    };
    require('./src/index.js');
})({"./src/index.js":{"dependencies":{"./message.js":"src/message.js"},"code":"\"use strict\";\n\nvar _message = _interopRequireDefault(require(\"./message.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nconsole.log(_message[\"default\"]);"},"src/message.js":{"dependencies":{"./word.js":"src/word.js"},"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports[\"default\"] = void 0;\n\nvar _word = require(\"./word.js\");\n\nvar message = \"say \".concat(_word.word);\nvar _default = message;\nexports[\"default\"] = _default;"},"src/word.js":{"dependencies":{},"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.word = void 0;\nvar word = 'hello';\nexports.word = word;"}});

将以上代码复制到控制台，能正确打印出'say hello'，至此，我们已经完成bundler打包代码。

标签：exports,code,word,require,Bundler,js,webpack,源码,message
来源： https://www.cnblogs.com/jingouli/p/12336384.html