关于前端:Babel-原理手把手教你不到200行代码实现属于自己的超mini版编程语言

题目是有点题目党的嫌疑，然而看完这篇文章如果没有播种，`评论区写不低于 500 字起因`。（邪笑）

带着疑难去学习：

各种各样的编程语言层出不穷，进而会产生许多带有不同后缀的文件（.js,.jsx,.ts,.py,.go,.php,.java），这些文件的内容对程序员来说是逻辑的表白，然而对计算机来说，也就是带着不同后缀的二进制文件，那他们是如何变成机器读得懂的语言呢？
如果我想要实现一个属于本人后缀的语言应该怎么实现呢？

编程语言是将字符串转换为各种机器代码输入的规定集。

简而言之，编程语言只是一组预约义的规定。有肯定的编程范式，而后通过编译器/解释器来转换为管制计算机运行的机器语言。而咱们明天就是要利用js 来实现一个简略的解释器。

先看成果

新建文件 demo.fjk

内容为：

输入 "你好世界"输入 "hahaha"

运行得出：

外围代码仅仅 120 行

这只是其中的一个思路，你齐全能够联合webpack应用本人的后缀，应用本人的 loader 去解析和解决。

01. 应用nodejs获取编程文件，并读取编程数据

这个对各位资深大佬那不是分分钟搞定？

//demo.fjk输入 "你好世界"输入 "hahaha"// index.jsconst Fjk = require('./Fjk')const fs = require('fs')const path = require('path')const codes = fs.readFileSync(path.join(__dirname, './demo.fjk'), 'utf8').toString().replace(/\r/g, '/n')const magenta = new Fjk(codes);magenta.run();

大抵解读一下，咱们先读取到 demo.fjk的文件内容，而后替换其中的换行，而后把读取到的代码交给由类 Fjk创立的实例去解决，执行 run 办法去执行demo.fjk程序。

02. 去实现这个Fjk 的类

首先承受传递过去的代码 constructor构造函数
接下来去实现 run函数，去执行这串代码

class Fjk {    constructor(codes) {        this.codes = codes;    }  run() {    console.log(this.codes)  }}

到此结束。 哈哈，心里一慌吧？真正的实现才刚刚开始

03. 去实现一个简略的词法剖析，把输出的代码字符串变为可读的有逻辑的数据结构（AST 语法树）

0 先提取罕用的常量

const PrintStr = "输入";const TokenTypes = {    String: "string",    Print: "print",    Varchar: "varchar",}

1. 简略剖析整体思路

第一步要创立一个游标记录下以后解析的地位

第二步要创立一个列表记录下解析后的数据

第三步一个字一个字的去解析判断，去剖析。

大体的代码构造如下：（文末附有 GitHub 地址，提供残缺代码）

    // 词法解析    tokenize() {        const length = this.codes.length;        // 记录以后 解析的 地位        let pos = 0;        let tokens = [];        while (pos < length) {            let currentChar = this.codes[pos];        }        }

2. 判断 currentChar 的类型

如果是空格和换行间接跳过就行
如果是 "那就是 字符串类型
如果是 print 那就是 关键字

伪代码如下：

3. 是空格或者换行的状况比较简单一个 continue 间接跳过就行

4. 当currentChar 为 `"` 的时候，要取出两个 `"`包裹的内容作为字符串。

对以后的 pos 进行挪动累加，始终挪动到以后字符串的内容为 "，此时的res 记录的就是 "xxx"之中的 xxx内容，而后放入 tokens 里。

代码如下：

5. 最初一个判断，判断是不是零碎关键字

第一步还是对字符串进行提取，提取结束当前判断是不是 关键字 如果是关键字就存入tokens 里

代码如下：

通过词法剖析 解决当前的数据结构如下：（这个是简略的版本的简单版本的能够去GitHub 里看 v3 版本）

04. 获取到token 当前再次进行语法分析

怎么进行语法分析呢？简略来说就是一个残缺的句子。

比如说：我学习js。就不能是 我js ，短少了关键字就不能表述出想说的意思了。在者说就是：用js 写了赋值语句，写成了 const = 123，从语法上就死掉了。话不多说开搞。

一一一一的进行 token 解析

写一个parse 函数承受词法解析后的 tokens。

从第一个 tokens 开始解析
如果是 输入关键词的token ，就须要判断下一个 token 是否是字符串 这样才满足语法

代码如下

// 语法解析    parse(tokens) {        const len = tokens.length;        let pos = 0;        while (pos < len) {            const currentToken = tokens[pos];            // 如果是 PrintStr 关键字 也就是 `输入`            if (currentToken.type === TokenTypes.Print && currentToken.value === PrintStr) {                // 如果下一个 currentToken 不存在                if (!tokens[pos + 1]) {                    return console.log('以后行谬误，冀望的是字符串' + pos);                }                // 校验下一个 currentToken 是否是 字符串                let isString = tokens[pos + 1].type === 'string';                if (!isString) {                    return console.log(`currentToken 解析谬误 ${tokens[pos + 1].type}，冀望的是字符串`)                }                // 语法没有谬误 输入                console.log('\x1b[35m%s\x1b[0m', tokens[pos + 1].value);                // pos 的地位减少2，2 代表的 是 PrintStr 一个 currentToken 字符串 一个 currentToken                pos+= 2            } else {                return console.log(`未匹配的token ${currentToken.type}`)            }        }    }

总结

这个mini的编程语言，尽管语法简略，然而这个思路是很重要的，把代码的输出，词法解析以及语法解析都波及到了。还有一个 v3 简单版本的，减少了变量的相干解析，大家能够本人试试实现。（也能够参考我的GitHub v3 版本）

输出如下：

print "hello world"var world = "hahaha"print world

输入如下：

hello worldhahaha

附上残缺的代码地址：实现一个mini版编程语言

大家看完如果有疑难，欢送加我 fjk1586237690 一起学习提高。

题目是有点题目党的嫌疑，然而看完这篇文章如果没有播种，评论区写 不低于 500 字 起因。（邪笑）