我写了一个模块捆绑器注释等

我构建了一个简单的 javascript 捆绑器，结果比我预期的要容易得多。我将分享我在这篇文章中学到的所有知识。

编写大型应用程序时，最好将 javascript 源代码划分为单独的 js 文件，但是使用多个脚本标签将这些文件添加到 html 文档中会带来新问题，例如

全局命名空间的污染。

比赛条件。

模块捆绑器将不同文件中的源代码合并到一个大文件中，帮助我们享受抽象的好处，同时避免缺点。

模块捆绑器通常分两步完成。

从入口文件开始，找到所有的javascript源文件。这称为依赖解析，生成的映射称为依赖图。使用依赖图生成一个bundle：一大串可以在浏览器中运行的javascript源代码。这可以写入文件并使用脚本标签添加到 html 文档。

依赖解析

如前所述，我们在这里

获取入口文件，阅读并解析其内容，将其添加到模块数组中找到它的所有依赖项（它导入的其他文件），读取并解析依赖内容向数组添加依赖项查找依赖项的依赖项等等，直到我们到达最后一个模块

我们将这样做（前面是 javascript 代码）

在文本编辑器中创建一个bundler.js 文件并添加以下代码：

const bundler = (entry)=>{          const graph = createdependencygraph(entry)          const bundle = createbundle(graph)          return bundle}

登录后复制

bundler 函数是我们bundler 的主要入口。它获取文件（入口文件）的路径并返回一个字符串（捆绑包）。在其中，它使用 createdependencygraph 函数生成依赖图。

const createdependencygraph = (path)=>{          const entrymodule = createmodule(path)          /* other code */}

登录后复制

createdependencygraph 函数获取入口文件的路径。它使用 createmodule 函数生成此文件的模块表示。

let id = 0const createmodule = (filename)=>{          const content = fs.readfilesync(filename)          const ast = babylon.parse(content, {sourcetype: “module”})          const {code} = babel.transformfromast(ast, null, {              presets: ['env']            })           const dependencies = [ ]           const id = id++           traverse(ast, {                   importdeclaration: ({node})=>{                       dependencies.push(node.source.value)                   }            }            return {                           id,                           filename,                           code,                           dependencies                       }}

登录后复制

createasset 函数获取文件的路径并将其内容读取到字符串中。然后该字符串被解析为抽象语法树。抽象语法树是源代码内容的树表示。它可以比作 html 文档的 dom 树。这使得在代码上运行一些功能变得更容易，例如搜索等。
我们使用babylon解析器从模块创建一个ast。

接下来，在 babel 核心转译器的帮助下，我们将代码内容转换为 es2015 之前的语法，以实现跨浏览器兼容性。
然后使用 babel 中的特殊函数遍历 ast 来查找源文件的每个导入声明（依赖项）。

然后我们将这些依赖项（相对文件路径的字符串文本）推送到依赖项数组中。

我们还创建一个 id 来唯一标识该模块并且
最后我们返回一个代表该模块的对象。该模块包含一个 id、字符串格式的文件内容、依赖项数组和绝对文件路径。

const createdependencygraph = (path)=>{          const entrymodule = createmodule(path)          const graph = [ entrymodule ]          for ( const module of graph) {                  module.mapping = { }module.dependencies.foreach((dep)=>{         let absolutepath = path.join(dirname, dep);         let child = graph.find(mod=> mod.filename == dep)         if(!child){               child = createmodule(dep)               graph.push(child)         }         module.mapping[dep] = child.id})          }          return graph}

登录后复制

回到 createdependencygraph 函数，我们现在可以开始生成图的过程。我们的图表是一个对象数组，每个对象代表我们应用程序中使用的每个源文件。
我们使用入口模块初始化图表，然后循环它。尽管它只包含一项，但我们通过访问入口模块（以及我们将添加的其他模块）的依赖项数组来将项添加到数组的末尾。

dependency 数组包含模块所有依赖项的相对文件路径。该数组被循环，对于每个相对文件路径，首先解析绝对路径并用于创建新模块。该子模块被推到图的末尾，并且该过程重新开始，直到所有依赖项都已转换为模块。
此外，每个模块都给出一个映射对象，该对象简单地将每个依赖项相对路径映射到子模块的 id。
对每个依赖项执行检查模块是否已存在，以防止模块重复和无限循环依赖。
最后我们返回我们的图表，它现在包含我们应用程序的所有模块。

捆绑

依赖图完成后，生成包将涉及两个步骤

将每个模块包装在一个函数中。这就产生了每个模块都有自己的作用域的想法在运行时包装模块。

包装每个模块

我们必须将模块对象转换为字符串，以便我们能够将它们写入到bundle.js 文件中。我们通过将 modulestring 初始化为空字符串来实现此目的。接下来，我们循环遍历图表，将每个模块作为键​​值对附加到模块字符串中，模块的 id 为键，数组包含两项：首先，包装在函数中的模块内容（以赋予其范围，如前所述） ）和第二个包含其依赖项映射的对象。

const wrapmodules = (graph)=>{         let modules = ‘’           graph.foreach(mod => {    modules += `${http://mod.id}: [      function (require, module, exports) {        ${mod.code}      },      ${json.stringify(mod.mapping)},    ],`;  });return modules}

登录后复制

还要注意，包装每个模块的函数将 require、export 和 module 对象作为参数。这是因为这些在浏览器中不存在，但由于它们出现在我们的代码中，我们将创建它们并将它们传递到这些模块中。

创建运行时

这是将在加载包后立即运行的代码，它将为我们的模块提供 require、module 和 module.exports 对象。

const bundle = (graph)=>{        let modules = wrapmodules(graph)        const result = `    (function(modules) {      function require(id) {        const [fn, mapping] = modules[id];        function localrequire(name) {          return require(mapping[name]);        }        const module = { exports : {} };        fn(localrequire, module, module.exports);        return module.exports;      }      require(0);    })({${modules}})`;  return result;}

登录后复制

我们使用立即调用的函数表达式，它将我们的模块对象作为参数。在其中我们定义了 require 函数，该函数使用模块对象的 id 从模块对象中获取模块。
它构造一个特定于特定模块的 localrequire 函数，以将文件路径字符串映射到 id。以及一个具有空导出属性的模块对象
它运行我们的模块代码，传递 localrequire、模块和导出对象作为参数，然后返回 module.exports，就像 node js 模块一样。
最后我们在入口模块（索引 0）上调用 require。

为了测试我们的捆绑器，在bundler.js文件的工作目录中创建一个index.js文件和两个目录：一个src和一个公共目录。

在public目录下创建一个index.html文件，并在body标签中添加以下代码：

                                   
            </htmlin the src directory create a name.js file and add the following code

登录后复制

常量名称=“大卫”
导出默认名称

also create a hello.js file and add the following code

登录后复制

从‘./name.js’导入名称
const hello = document.getelementbyid(“root”)
hello.innerhtml = “你好” + 名字

lastly in the index.js file of the root directory import our bundler, bundle the files and write it to a bundle.js file in the public directory

登录后复制

const createbundle = require(“./bundler.js”)
const run = (输出, 输入)=>{
让bundle = creatbundle(entry)
fs.writefilesync(bundle, ‘utf-8’)
}
运行（“./public/bundle.js”，“./src/hello.js”）

Open our index.html file in the browser to see the magic.In this post we have illustrated how a simple module bundler works. This is a minimal bundler meant for understanding how these technologies work behind the hood.please like if you found this insightful and comment any questions you may have.

登录后复制

以上就是我写了一个模块捆绑器注释等的详细内容，更多请关注【创想鸟】其它相关文章！