@babel/traverse 官网: https://babeljs.io/docs/en/babel-traverse github:https://github.com/babel/babel/blob/master/packages/babel-traverse/test/traverse.js 了解一个东西最直接的方法就是看官网了解怎么用,看github源码Test模块代码的使用和测试. @babel/traverse 可以用来遍历更新@babel/parser生成的AST 对语法树中

抽象语法树 什么是抽象语法树? It is a hierarchical program representation that presents source code structure according to the grammar of a programming language, each AST node corresponds to an item of a source code. 抽象语法树是源代码语法结构的一种抽象表示.它以树状的形式表现编程语言的语法结构,树上的每个节点

背景 我们的小程序项目的构建是与web项目保持一致的,完全使用webpack的生态来构建,没有使用小程序自带的构建功能,那么就需要我们配置代码转换的babel插件如Promise.Proxy等:另外,项目中涉及到异步的功能我们统一使用async/await来处理.我们知道,小程序的onError 生命周期只能捕获同步错误,而完全不采用小程序自带构建工具的情况下,开发模式下遇到的问题: 小程序异步代码中的异常onError无法捕获,开发者工具控制台也没有抛出异常信息 这样在开发过程中页面展示异常,

webpack早就已经在前端领域大放异彩,会使用和优化webpack也已经是中.高级工程师必备技能,在此基础之上再对webpack的原理进行理解和掌握,必定会在未来的开发中事半功倍.若是对于webpack不熟悉可以查看之前的文章进行学习和了解. 由于本人能力一般.水平有限,所以会在本篇文章编写过程中对一些内容进行又臭又长的赘述,就是为了能让一些基础比较薄弱的同学阅读起来可以更加省心点,接下来即将开始正题了,希望此文章能对你有些许帮助. 构建项目 新建一个文件夹 webpack-theory 是之

基本打包机制 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle. 打包过程可以拆分为四步: 1.利用babel完成代码转换,并生成单个文件的依赖 2.从入口开始递归分析,并生成依赖图谱 3.将各个引用模块打包为一个立即执行函数 4.将最终的bundl

webpack webpack 最出色的功能之一就是,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件. Webpack 核心概念: Entry(入口):Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入. Output(出口):指示 webpack 如何去输出.以及在哪里输出 Module(模块):在 Webpack 里一切皆模块,一个模块对应着一个文件.Webpack 会从配置的 Entry 开始递归找出所有依赖的模块. Chunk(代码块):一

作者: 凹凸曼 - 风魔小次郎 背景 Webpack 迭代到4.x版本后,其源码已经十分庞大,对各种开发场景进行了高度抽象,阅读成本也愈发昂贵.但是为了了解其内部的工作原理,让我们尝试从一个最简单的 webpack 配置入手,从工具设计者的角度开发一款低配版的 Webpack. 开发者视角 假设某一天,我们接到了需求,需要开发一个 react 单页面应用,页面中包含一行文字和一个按钮,需要支持每次点击按钮的时候让文字发生变化.于是我们新建了一个项目,并且在 [根目录]/src 下新建 JS 文件

程序员最讨厌的两件事情,第一种是写文档,另一种是别人没有写文档.有没有直接根据vue组件生成文档的呢?当然是有的的.但第三方使用起来不一定能和现有项目结合使用,往往需要额外的注释用来标记提取信息.使用第三方的一些比较常见问题 文档提取信息不全面,可能有些信息你需要提取但是它又不支持.这种情况下就只能修改三方的插件源码了. 需要额为的注释信息来标记,例如 vuese 需要给方法 打 @vuese.@arg 等标记来提供方法信息. 俗话说自己动手丰衣足食,打造自己的vue文档生成工具与自己项目结合使

简介 本文会从零开始配置一个monorepo类型的组件库,包括规范化配置.打包配置.组件库文档配置及开发一些提升效率的脚本等,monorepo 不熟悉的话这里一句话介绍一下,就是在一个git仓库里包含多个独立发布的模块/包. ps.本文涉及到的工具配置其实在平时开发中一般都不需要自己配置,我们使用的各种脚手架都帮我们搞定了,但是我们至少得大概知道都是什么意思以及为什么,说来惭愧,笔者作为一个三四年工龄的前端老人,基本没有自己动手配过,甚至没有去了解过,所以以下大部分工具都是笔者第一次使用,除了介

为什么需要 wepy 转 VUE "转转二手"是我司用 wepy 开发的功能与 APP 相似度非常高的小程序,实现了大量的功能性页面,而新业务 H5 项目在开发过程中有时也经常需要一些公共页面和功能,但新项目又有自己的独特点,这些页面需求重新开发成本很高,但如果把小程序代码转换成 VUE 就会容易的多,因此需要这样一个转换工具. 本文将通过实战带你体验 HTML.css.JavaScript 的 AST 解析和转换过程 如果你看完觉得有用,请点个赞~ AST 概览 AST 全称是叫抽象

Babel是一个javascrpt编译器,能将es6转换为es5代码.并且通过插件的形式可以灵活的扩展. 从根目录读取.babelrc文件中读取配置..babelrc是一个json文件 配置 plugins babel-plugin-transform-runtime 要和 babel-runtime配合使用 减少多余的代码 presets 告诉babel要转换的源代码要使用那些新的语法特性,可以分为三大类. 已经被ECMAscript标准里的特性 ES2015 ES2016 ES2017 20

作者简介:于航,PayPal Senior Software Engineer,在 PayPal 上海负责 Global GRT 平台相关的技术研发工作.曾任职于阿里巴巴.Tapatalk 等企业.freeCodeCamp 上海社区负责人.研究领域主要为前端基础技术架构.Serverless.WebAssembly.LLVM 及编译器等相关方向. 说到 Web 前端开发,我们首先能够想到的是浏览器.HTML.CSS 以及 JavaScript 这些开发时所必备使用的软件工具和编程语言.而在这个专

webpack打包原理分析 基础配置,webpack会读取配置 (找到入口模块) 如:读取webpack.config.js配置文件: const path = require("path") module.exports = { entry:"./src/index.js" mode:"development" output:{ path:path.resolve(__dirname,"./dist"), filename:

现实 webpack 的打包产物 大概长这样(只把核心代码留下来): 实现一个简版的webpack 依葫芦画瓢,实现思路分2步: 1. 分析入口文件,把所有的依赖找出来(包括所有后代的依赖) 2. 拼接出类似上面的立即执行函数 找依赖 const fs = require('fs'); const path = require('path'); const parser = require('@babel/parser'); const traverse = require('@babel/tr

通过第一部分的学习,我们已经可以分析一个js的文件.这节课我们学习Dependencies Graph,也就是依赖图谱.对所有模块进行分析.先分析index.js.index.js里面引入了messgage.js.再去分析message,一层一层的去分析,要想实现这个效果,需要去写个函数. const fs = require('fs'); // 帮助我们获取一些文件的信息 const path = require('path'); // 打包的时候需要绝对路径,借助path这个模块 const

新建一个项目,再新建一个src文件夹,里面有三个文件,word.js,message.js,index.js word.js export const word = 'hello'; message.js import { word } from './word.js'; const message = `say ${word}`; export default message; index.js import message from './message.js'; console.log(m

let fs = require('fs'); let path = require('path'); let babylon = require('babylon'); // Babylon 把源码转换为AST let t = require('@babel/types'); // @babel-types 替换节点 let traverse = require('@babel/traverse').default; // @babel-traverse 遍历节点 let generator

什么是 webpack ? 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle. webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果. 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处

手写webpack核心原理 目录 手写webpack核心原理 一.核心打包原理 1.1 打包的主要流程如下 1.2 具体细节 二.基本准备工作 三.获取模块内容 四.分析模块 五.收集依赖 六.ES6转成ES5(AST) 七.递归获取所有依赖 八.处理两个关键字 一.核心打包原理 1.1 打包的主要流程如下 需要读到入口文件里面的内容. 分析入口文件,递归的去读取模块所依赖的文件内容,生成AST语法树. 根据AST语法树,生成浏览器能够运行的代码 1.2 具体细节 获取主模块内容 分析模块 安装

本文开始我会围绕webpack和babel写一系列的工程化文章,这两个工具我虽然天天用,但是对他们的原理理解的其实不是很深入,写这些文章的过程其实也是我深入学习的过程.由于webpack和babel的体系太大,知识点众多,不可能一篇文章囊括所有知识点,目前我的计划是从简单入手,先实现一个最简单的可以运行的webpack,然后再看看plugin, loader和tree shaking等功能.目前我计划会有这些文章: 手写最简webpack,也就是本文 webpack的plugin实现原理 web