ES6 module加载原理探究

想起这个问题是源于阅读的es6手册时见到“Module 的加载实现”：http://es6.ruanyifeng.com/#docs/module-loader

目前为了处理兼容性，一般会使用babel进行预编译

这时产生了一个问题babel-core/browser.js如何实现import的？

这里先引入一个问题，就是babel是如何解析js代码的？从babel的官网可以了解到解析代码用的是一个叫babylon的库，

完整的流程如下：ES6代码输入 ==》 babylon进行解析 ==》 得到AST==》 plugin用babel-traverse对AST树进行遍历转译 ==》 得到新的AST树 ==》 用babel-generator通过AST树生成ES5代码

现在(201907)babylon的解析已经移到@babel/parser了，使用如下：

const babylon = require("@babel/parser");
let code = ` let a = 1, b = 2; function sum(a, b){ return a + b; } sum(a, b);`;  console.log(babylon.parse(code));

可以在console下面看到如下的对象

之后通过对对象的解析，包括关键字，完成转译功能，但这不是本文讨论重点，下面我们来尝试一下import的实现。

最常见的引用外部js方法是通过script，恰好有onload回调，先来尝试一下

load.js

console.log("load js");
setTimeout(()=>{console.log("loaded js")})

index.html

<script type="text/javascript">
var header = document.getElementsByTagName('head')[0];
var loadScript = document.createElement('script');
loadScript.setAttribute('type', 'text/javascript');
loadScript.setAttribute('src', 'load.js');
loadScript.setAttribute('id', 'load_js');
loadScript.onload = function(res, res2) {
     console.log('on load');
     console.log(res);
     console.log(res2);
};
header.appendChild(loadScript);
</script>

看一下输出：

可以看到onload只有一个回调参数，做了各种尝试依然无法从参数里得到js的string，无法得到import的string自然无法进行解析。

除了这个我们没有其他办法加载js了吗？

Ajax不是可以获取string吗？用它来获取一下js试试。

为了方便引入jquery

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

再修改一下load.js，加入module，代码如下：

console.log("load js")
setTimeout(()=>{ console.log("loaded js")})
var name = 'Evan .c';
var module = { name: name}

核心代码：

var nameSpace = {};
$.get('load.js', function(data) {
     (function f() {
         eval(data); nameSpace.loadjs = module;
|     })();
 console.log(nameSpace);});

可以看到成功输出了nameSpace = {loadjs { name: 'Evan.C'}}

load.js

index.html

当然可以继续加入不同的模块。

calculator.js

babel的话不是我这样简单粗暴的使用eval解析，而是通过babylon解析出对象，再进行变量和方法的挂接。

完整代码可以参考: https://github.com/liuxiaocong/JScode/tree/master/loadJS