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

百变鹏仔 3天前 #JavaScript

文章标签写了

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

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

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

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

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

依赖解析

如前所述，我们在这里

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

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

const bundler = (entry)=&gt;{          const graph = createdependencygraph(entry)          const bundle = createbundle(graph)          return bundle}

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

const createdependencygraph = (path)=&gt;{          const entrymodule = createmodule(path)          /* other code */}

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

let id = 0const createmodule = (filename)=&gt;{          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})=&gt;{                       dependencies.push(node.source.value)                   }            }            return {                           id,                           filename,                           code,                           dependencies                       }}

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

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

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

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

const createdependencygraph = (path)=&gt;{          const entrymodule = createmodule(path)          const graph = [ entrymodule ]          for ( const module of graph) {                  module.mapping = { }module.dependencies.foreach((dep)=&gt;{         let absolutepath = path.join(dirname, dep);         let child = graph.find(mod=&gt; 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)=&gt;{         let modules = ‘’           graph.foreach(mod =&gt; {    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)=&gt;{        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标签中添加以下代码：

            <title>module bundler</title><meta name="viewport" content="width=device-width, initial-scale=1"><div id="root"></div>       <script src="%E2%80%98./bundler.js"> <script>    in the src directory create a name.js file and add the following code</script>

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

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.

文章推荐

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

依赖解析

捆绑

包装每个模块

创建运行时

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？