想起这个问题是源于阅读的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
网友评论