如何实现一个webpack模块解析器

2024-10-01 06:49:30

最近在学习 webpack源码，由于源码比较复杂，就先梳理了一下整体流程，就参考官网的例子，手写一个最基本的 webpack 模块解析器。

代码很少，github地址：手写webpack模块解析器

整体流程分析

1、读取入口文件。

2、将内容转换成 ast 语法树。

3、深度遍历语法树，找到所有的依赖，并加入到一个数组中。

4、将 ast 代码转换回可执行的 js 代码。

5、编写 require 函数，根据入口文件，自动执行完所有的依赖。

6、输出运行结果。

createAsset

// 读取内容并提取它的依赖关系
function createAsset(filename) {
 // 以字符串的形式读取文件
 const content = fs.readFileSync(filename, "utf-8");

 // 转换字符串为ast抽象语法树
 const ast = babylon.parse(content, {
  sourceType: "module"
 });

 const dependencies = [];

 // 遍历抽象语法树
 traverse(ast, {
  // 每当遍历到import语法的时候
  ImportDeclaration: ({ node }) => {
   // 把依赖的模块加入到数组中
   dependencies.push(node.source.value);
  }
 });

 const id = ID++;

 // 转换为浏览器可运行的代码
 const { code } = babel.transformFromAstSync(ast, null, {
  presets: ["@babel/preset-env"]
 });

 return {
  id,
  filename,
  dependencies,
  code
 };
}

createGraph

// 从入口开始，分析所有依赖项，形成依赖图，采用深度优先遍历
function createGraph(entry) {
 const mainAsset = createAsset(entry);

 // 定义一个保存依赖项的数组
 const queue = [mainAsset];

 for (const asset of queue) {
  const dirname = path.dirname(asset.filename);

  // 定义一个保存子依赖项的属性
  asset.mapping = {};

  asset.dependencies.forEach(relativePath => {
   const absolutePath = path.join(dirname, relativePath);

   const child = createAsset(absolutePath);

   // 给子依赖项赋值
   asset.mapping[relativePath] = child.id;

   // 将子依赖也加入队列中，循环处理
   queue.push(child);
  });
 }
 return queue;
}

bundle

// 根据生成的依赖关系图，生成浏览器可执行文件
function bundle(graph) {
 let modules = "";

 // 把每个模块中的代码放在一个function作用域内
 graph.forEach(mod => {
  modules += `${mod.id}:[
   function (require, module, exports){
    ${mod.code}
   },
   ${JSON.stringify(mod.mapping)},
  ],`;
 });

 // require, module, exports 不能直接在浏览器中使用，这里模拟了模块加载，执行，导出操作。
 const result = `
  (function(modules){
   // 创建一个require()函数: 它接受一个 模块ID 并在我们之前构建的模块对象查找它.
   function require(id){
    const [fn, mapping] = modules[id];

    function localRequire(relativePath){
     // 根据mapping的路径，找到对应的模块id
     return require(mapping[relativePath]);
    }

    const module = {exports:{}};

    // 执行转换后的代码，并输出内容。
    fn(localRequire,module,module.exports);

    return module.exports;
   }

   // 执行入口文件
   require(0);

  })({${modules}})
 `;

 return result;
}

执行解析

const graph = createGraph("./entry.js");
const result = bundle(graph);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

浅谈Webpack 是如何加载模块的

Webpack 在前端开发中作为模块打包工具非常受开发者的青睐,丰富的 loader 使它可以实现各种各样的功能.本文将通过 webpack 来打包一个 js 文件,看看 webpack 是如何加载各个模块的. 两个简单的源文件为了方便分析 webpack 加载模块的原理,我们准备了两个文件: hello.js const hello = { say: arg => { console.info('hello ' + arg || 'world'); } }; export default h
详解用webpack把我们的业务模块分开打包的方法

webpack我自己还在摸索学习中,今天给大家分享个用webpack把我们的业务模块分开打包的方法,顺便留个笔记如何用webpack打包这3个js? 只需修改webpack的配置文件webpack.config.js: // entry是入口文件,可以多个,代表要编译那些js entry:['./src/main.js','./src/login.js','./src/reg.js'], 这样就可以全部打包,最终生成./build/js/build.js 1,那么如果我们想最后生成不同的文件,
webpack配置sass模块的加载的方法

webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置.这里不讲webpack的入门,入门的文章,我推荐这篇<webpack入门>. 为了使用sass,我们需要安装sass的依赖包 //在项目下,运行下列命令行 npm install --save-dev sass-loader //因为sass-loader依赖于node-sass,所以还要安装node-sass npm install --save-dev node-sass 当然了,使用样式的话,css-lo
详解webpack模块化管理和打包工具

本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载.通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.
关于webpack2和模块打包的新手指南（小结）

webpack已成为现代Web开发中最重要的工具之一.它是一个用于JavaScript的模块打包工具,但是它也可以转换所有的前端资源,例如HTML和CSS,甚至是图片.它可以让你更好地控制应用程序所产生的HTTP请求数量.允许你使用其他资源的特性(例如Jade.Sass和ES6).webpack还可以让你轻松地从npm下载包. 本文主要针对那些刚接触webpack的同学,将介绍初始设置和配置.模块.加载器.插件.代码分割和热模块替换. 在继续学习下面的内容之前需要确保你的电脑中已经安装了Node
详解webpack模块加载器兼打包工具

什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到. 你可以不打算将其用在你的项目上,但没有理由不去掌握它,因为以近
webpack external模块的具体使用

这篇文章讨论Webpack打包library时经常需要用到的一个选项external,它用于避免将一些很通用的模块打包进你发布的library里,而是选择把它们声明成external的模块,在你的library被上层使用后,在最后阶段由Webpack统一把这个external的依赖模块打包进来. external选项一般都是用在打包library上面,如果不是library而是一个最终的app的发布JS文件,那external也没有什么意义.关于Webpack打包library的分析和一些选项的
浅谈webpack组织模块的原理

现在前端用Webpack打包JS和其它文件已经是主流了,加上Node的流行,使得前端的工程方式和后端越来越像.所有的东西都模块化,最后统一编译.Webpack因为版本的不断更新以及各种各样纷繁复杂的配置选项,在使用中出现一些迷之错误常常让人无所适从.所以了解一下Webpack究竟是怎么组织编译模块的,生成的代码到底是怎么执行的,还是很有好处的,否则它就永远是个黑箱.当然了我是前端小白,最近也是刚开始研究Webpack的原理,在这里做一点记录. 编译模块编译两个字听起来就很黑科技,加上生成的代码
webpack 模块热替换原理

全称是Hot Module ReplaceMent(HMR),理解成热模块替换或者模块热替换都可以吧,和.net中的热插拔一个意思,就是在运行中对程序的模块进行更新.这个功能主要是用于开发过程中,对生产环境没有任何帮助(这一点区别.net热插拔).效果上就是界面的无刷新更新. HMR基于WDS,style-loader可以通过它来实现无刷新更新样式.但是对于JavaScript模块就需要做一点额外的处理,怎么处理继续往下看.因为HMR是用于开发环境的,所以我们修改下配置,做两份准备.一个用于生产
如何实现一个webpack模块解析器

最近在学习 webpack源码,由于源码比较复杂,就先梳理了一下整体流程,就参考官网的例子,手写一个最基本的 webpack 模块解析器. 代码很少,github地址:手写webpack模块解析器整体流程分析 1.读取入口文件. 2.将内容转换成 ast 语法树. 3.深度遍历语法树,找到所有的依赖,并加入到一个数组中. 4.将 ast 代码转换回可执行的 js 代码. 5.编写 require 函数,根据入口文件,自动执行完所有的依赖. 6.输出运行结果. createAsset // 读取
从零实现一个vue文件解析器

如何从 0 处理一个 vue 文件并实现简单的响应式? 在现在的前端工程化中,打包工具是不可或缺的,其中webpack无疑是占据了主导地位,当然也有尤大搞的vite,但是论生态和使用人数,至少在目前webpack还是更胜一筹. 打包工具能帮助我们打包前端文件,在webpack中,不同后缀的文件通过不同loader来处理. 本文就讨论下怎么实现一个处理.vue文件的loader,以及用loader处理完.vue文件怎么把内容渲染在浏览器上,并实现简单的响应式. 源码地址 gezhicui/vue-
JavaScript webpack模块打包器如何优化前端性能

目录一.webpack的使用背景二.webpack如何优化 1. JS代码压缩 2.CSS代码压缩 3. HTML文件压缩 4. 文件大小压缩 5. 图片压缩 6. Tree Shaking 7. 代码分离 8. 内联chunk 9. 利用CDN加速以及提取公共第三方库三.总结一.webpack的使用背景随着前端的项目逐渐扩大,必然会导致性能问题.尤其大大型复杂的项目中,前端业务可能因为一个小小的数据依赖,导致整个页面的卡顿甚至崩溃. 一般项目在完成后,会通过webpack进行打包,利
使用70行Python代码实现一个递归下降解析器的教程

第一步:标记化处理表达式的第一步就是将其转化为包含一个个独立符号的列表.这一步很简单,且不是本文的重点,因此在此处我省略了很多. 首先,我定义了一些标记(数字不在此中,它们是默认的标记)和一个标记类型: token_map = {'+':'ADD', '-':'ADD', '*':'MUL', '/':'MUL', '(':'LPAR', ')':'RPAR'} Token = namedtuple('Token', ['name', 'value']) 下面就是我用来标记 `expr` 表
Python命令行解析器argparse详解

目录第1章 argparse简介 1.1 解析 1.2 argparse定义三步骤 1.3 代码示例第2章参数详解 2.1 创建一个命令行解析器对象:ArgumentParser() 2.2 为命令行添加参数: add_argument() 方法 2.3 解析命令行的参数:parse_args() 2.4 命令行参数的输入 2.5 命令行参数的使用总结第1章 argparse简介 1.1 解析 argparse 模块是 Python 内置的一个用于命令项选项与参数解析的模块,argp
Java Class 解析器实现方法示例

最近在写一个私人项目,名字叫做ClassAnalyzer,ClassAnalyzer的目的是能让我们对Java Class文件的设计与结构能够有一个深入的理解.主体框架与基本功能已经完成,还有一些细节功能日后再增加.实际上JDK已经提供了命令行工具javap来反编译Class文件,但本篇文章将阐明我实现解析器的思路. Class文件作为类或者接口信息的载体,每个Class文件都完整的定义了一个类.为了使Java程序可以"编写一次,处处运行",Java虚拟机规范对Class文件进行了严
使用自定义参数解析器同一个参数支持多种Content-Type

目录一堆废话探究Springmvc参数解析器工作流程不想看废话的可以直接进结果补充一堆废话事出有因, 原先上线的接口现在被要求用Java重写,按照原暴露出去的文档然后毫无疑问的,按照Java的惯例, 一定是@RequestBody然后去接收application/json;charset=utf-8,然后一通参数接收处理逻辑. 结果测试都通过了,上线的时候,刚把原接口切到新接口上,日志就狂飙 application/x-www-form-urlencoded:charset=utf-
详解如何在SpringBoot中自定义参数解析器

目录前言 1.自定义参数解析器 2.PrincipalMethodArgumentResolver 3.RequestParamMapMethodArgumentResolver 4.小结前言在一个 Web 请求中,参数我们无非就是放在地址栏或者请求体中,个别请求可能放在请求头中. 放在地址栏中,我们可以通过如下方式获取参数: String javaboy = request.getParameter("name "); 放在请求体中,如果是 key/value 形式,我们可以通
webpack 如何解析代码模块路径的实现

前言 webpack是如何解析代码模块路径 webpack 中有一个很关键的模块 enhanced-resolve 就是处理依赖模块路径的解析的,这个模块可以说是 Node.js 那一套模块路径解析的增强版本,有很多可以自定义的解析配置. 模块解析规则解析相对路径查找相对当前模块的路径下是否有对应文件或文件夹是文件则直接加载是文件夹则继续查找文件夹下的 package.json 文件有 package.json 文件则按照文件中 main 字段的文件名来查找文件无 package.j
仅用500行Python代码实现一个英文解析器的教程

语法分析器描述了一个句子的语法结构,用来帮助其他的应用进行推理.自然语言引入了很多意外的歧义,以我们对世界的了解可以迅速地发现这些歧义.举一个我很喜欢的例子: 正确的解析是连接"with"和"pizza",而错误的解析将"with"和"eat"联系在了一起: 过去的一些年,自然语言处理(NLP)社区在语法分析方面取得了很大的进展.现在,小小的 Python 实现可能比广泛应用的 Stanford 解析器表现得更出色. 文章剩下

如何实现一个webpack模块解析器

相关推荐

随机推荐