在XP系统下IE浏览器最高只能装到IE8,在Vista系统下最高只能装到IE9。
2015年以后,JavaScript新增了很多语法,比如class、extends,还有let和const等等,这些语法都是XP下的终端浏览器IE8所不支持的。要想让使用了这些新式语法的js文件在IE8浏览器下正常运行,就必须用一种编译工具,把新语法js文件编译成旧语法js文件,使IE8浏览器能够运行。这个编译工具就是babel-cli。
babel-cli命令行工具不是用C语言写的,而是用JavaScript写的,必须要Node.js环境才能运行babel-cli。
支持xp和Vista系统的node.js最后版本是v5.12.0,可在官网中下载:https://nodejs.org/en/blog/release/v5.12.0
下载里面的node-v5.12.0-x86.msi文件,并在XP或Vista系统下安装。
安装后,在开始菜单里面打开Node.js命令行(Node.js菜单下的Node.js command prompt)。
执行:
npm install -g babel-cli
这会在全局目录(C:\Documents and Settings\当前用户名\Application Data\npm\node_modules)中安装babel-cli。
安装后,可在命令行中运行babel --version,输出内容是6.26.0 (babel-core 6.26.3)。
现在我们要在自己的D:\Code\Babel目录下创建两个文件。
一个是待编译的test.js代码文件,另一个是运行babel所需的.babelrc配置文件。
输入下面的命令:
D:
cd D:\Code\Babel\
notepad test.js
此时弹出了记事本,在里面输入文件内容:
class Example {
constructor(a) {
this.a = a;
if (window.console) {
console.log("this.a=" + this.a);
} else {
alert("this.a=" + this.a);
}
}
}
let a = new Example(10);
然后保存文件,再创建下一个文件。
notepad .babelrc
输入文件内容:
{
"presets": [
"env"
],
"plugins": []
}
然后保存文件。
在D:\Code\Babel目录下运行:
npm install babel-preset-env
这条命令的意思是在当前目录(D:\Code\Babel)安装babel-preset-env。
babel-preset-env必须安装到当前目录下,不能-g全局安装。
如果中途进度条卡住不动,按Ctrl+C并输入Y退出,然后重新运行这个命令。
安装完成后,会在当前文件夹下生成node_modules文件夹,里面有很多文件夹。
现在就可以编译test.js了:
babel test.js -presets env -o out.js
生成的out.js就是编译后的文件,另外还生成了一个无用的out.js.map文件。
生成的out.js的内容如下:
"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a
class as a function"); } }
var Example = function Example(a) {
_classCallCheck(this, Example);
this.a = a;
if (window.console) {
console.log("this.a=" + this.a);
} else {
alert("this.a=" + this.a);
}
};
var a = new Example(10);
//# sourceMappingURL=out.js.map
建立一个test.html文件,内容如下:
<script src="out.js"></script>
用IE8打开,IE8可以正常执行这个脚本,弹出this.a=10的对话框。
在IE8中按下F12,打开开发人员工具后,脚本中的window.console变得了有效了。
按F5刷新页面,可在开发人员工具的日志窗口中看到“日志: this.a=10”的输出,并且不再弹出alert对话框了。
这个代码在IE6下也能运行。