Node.js 编译 JavaScript 研究

发布于 2024-12-31 23:08:43 字数 1948 浏览 4 评论 0

很多老人认为 JavaScript 是往浏览器一扔就可以执行的解释型语言，哪来的什么编译。但事实上就存在着像 Babel 这类 JavaScript 编译器，而且这类 JS 编译器往往还是现阶段前端开发都离不开的，那么这里对 JavaScrit 代码的编译到底是什么呢？

本文将通过一个最简单的例子来玩玩所谓的编译 JavaScript 代码，到底是在干什么事情。

以下是本文测试代码的目录树（其中比较关键的几个文件源码也在下文分别列出）：

D:.
│  index.html
│  package-lock.json
│  package.json
│  test.js
│
└─node_modules
    │
    └─my_lib
            index.js

node_modules/my_lib/index.js 源码：

exports.name = '自定义测试模块';

exports.showVersion = function () {
    console.log('v1.0.0');
};

test.js 源码：

const myLib = require('my_lib');
myLib.showVersion();

const compile = () => {
    // 编译 `const myLib = require('my_lib');`
    const file = require('fs');
    const buildFileName = 'build.js';

    file.writeFile(buildFileName, '', () => {});

    const build = (key, value) => {
        value = typeof(value) === 'string'? `'${value}'` : value;
        return `var ${key} = ${value};\n`;
    };

    for (const key in myLib) {
        file.appendFile(buildFileName, build(key, myLib[key]), () => {});
    }


    // 编译 `myLib.showVersion();`
    file.appendFile(buildFileName, 'showVersion();\n', () => {});
};

compile();

index.html 源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>

<script src="build.js"></script>
</body>
</html>

其中 JavaScript 编译结果，即 build.js 源码：

var name = '自定义测试模块';
var showVersion = function () {
    console.log('v1.0.0');
};
showVersion();

以上的代码只是粗略模拟了 JavaScript 编译到底是在做什么，实际像 Babel 这类编译器做的事肯定是要复杂太多的。

不过从以上这个粗略的代码中，我们还是可以很清楚地了解到所谓对 JavaScript 代码的编译，事实上做的只是将当前浏览器不可识别的 JS 代码转换为当前浏览器可以识别的 JS 代码（比如将 ECMAScript 2015 及以上的代码转换为浏览器可识别的旧版 JS 代码，或是将 JSX 代码转换为 JS 代码等）罢了，这和 C/C++、Java 这类编译型语言的编译是有很大不同的。

分享到QQ

分享到微博