我写了一个模块捆绑器。笔记等
- 王林原创
- 2024-07-25 03:10:43442浏览
我构建了一个简单的 JavaScript 捆绑器，结果比我预期的要容易得多。我将分享我在这篇文章中学到的所有知识。
在编写大型应用程序时，最好将 JavaScript 源代码划分为单独的 js 文件，但是使用多个脚本标记将这些文件添加到 html 文档中会带来新问题，例如
全局命名空间的污染。
比赛条件。
模块捆绑器将不同文件中的源代码合并到一个大文件中，帮助我们享受抽象的好处，同时避免缺点。
模块捆绑器通常分两步完成此操作。
- 从入口文件开始查找所有的JavaScript源文件。这称为依赖解析，生成的映射称为依赖图。
- 使用依赖图生成一个包：一大串可以在浏览器中运行的 JavaScript 源代码。这可以写入文件并使用脚本标签添加到 html 文档。
依赖解析
如前所述，我们在这里
- 获取一个条目文件，
- 读取并解析其内容，
- 将其添加到模块数组
- 找到它的所有依赖项（它导入的其他文件），
- 读取并解析依赖内容
- 将依赖项添加到数组
- 查找依赖项的依赖项等等，直到我们到达最后一个模块
我们将这样做（前面是 JavaScript 代码）
在文本编辑器中创建一个bundler.js 文件并添加以下代码：
const bundler = (entry)=>{
const graph = createDependencyGraph(entry)
const bundle = createBundle(graph)
return bundle
}
捆绑器功能是我们捆绑器的主要入口。它获取文件（入口文件）的路径并返回一个字符串（捆绑包）。在其中，它使用 createDependencyGraph 函数生成依赖图。
const createDependencyGraph = (path)=>{
const entryModule = createModule(path)
/* other code */
}
createDependencyGraph 函数获取入口文件的路径。它使用 createModule 函数生成此文件的模块表示。
let ID = 0
const 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。
对每个依赖项执行检查模块是否已存在，以防止模块重复和无限循环依赖项。
最后我们返回我们的图表，它现在包含我们应用程序的所有模块。
捆绑
依赖图完成后，生成包将涉及两个步骤
- Wrapping each module in a function. This creates the idea of each module having its own scope
- Wrapping the module in a runtime.
Wrapping each module
We have to convert our module objects to strings so we can be able to write them into the bundle.js file. We do this by initializing moduleString as an empty string. Next we loop through our graph appending each module into the module string as key value pairs, with the id of a module being the key and an array containing two items: first, the module content wrapped in function (to give it scope as stated earlier) and second an object containing the mapping of its dependencies.
const wrapModules = (graph)=>{
let modules = ‘’
graph.forEach(mod => {
modules += `${http://mod.id}: [
function (require, module, exports) {
${mod.code}
},
${JSON.stringify(mod.mapping)},
],`;
});
return modules
}
Also to note, the function wrapping each module takes a require, export and module objects as arguments. This is because these don’t exist in the browser but since they appear in our code we will create them and pass them into these modules.
Creating the runtime
This is code that will run immediately the bundle is loaded, it will provide our modules with the require, module and module.exports objects.
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;
}
We use an immediately invoked function expression that takes our module object as an argument. Inside it we define our require function that gets a module from our module object using its id.
It constructs a localRequire function specific to a particular module to map file path string to id. And a module object with an empty exports property
It runs our module code, passing the localrequire, module and exports object as arguments and then returns module.exports just like a node js module would.
Finally we call require on our entry module (index 0).
To test our bundler, in the working directory of our bundler.js file create an index.js file and two directories: a src and a public directory.
In the public directory create an index.html file, and add the following code in the body tag:
<!DOCTYPE html>
<html>
<head>
<title>Module bundler</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id='root'></div>
<script src= ‘./bundler.js> <script>
</body>
</html
In the src directory create a name.js file and add the following code
const name = “David”
export default name
also create a hello.js file and add the following code
import name from ‘./name.js’
const hello = document.getElementById(“root”)
hello.innerHTML = “hello” + name
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 = (output , input)=>{
let bundle = creatBundle(entry)
fs.writeFileSync(bundle, ‘utf-8’)
}
run(“./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.
以上是我写了一个模块捆绑器。笔记等的详细内容。更多信息请关注PHP中文网其他相关文章！