在XP/Vista系统下使用Node.js的babel-cli命令行工具转码ES6语法的js文件,让IE8浏览器也能运行

在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"]
}
然后保存文件。

在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 -o out.js

生成的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);

建立一个test.html文件,内容如下:
<script src="out.js"></script>
用IE8打开,IE8可以正常执行这个脚本,弹出this.a=10的对话框。

在IE8中按下F12,打开开发人员工具后,脚本中的window.console变得了有效了。
按F5刷新页面,可在开发人员工具的日志窗口中看到“日志: this.a=10”的输出,并且不再弹出alert对话框了。

这个代码在IE6下也能运行。

Vista SP2下的IE9的运行效果:


我们还可以用babel命令编译指定文件夹下的所有js文件,例如:
babel myfolder --out-dir myfolder_out
编译整个文件夹时的注意事项:
(1)执行babel命令时,当前文件夹必须有.babelrc配置文件和node_modules文件夹(里面安装的是babel-preset-env)。

(2)被编译的文件夹myfolder中不能有node_modules文件夹,否则node_modules文件夹会被认为是普通文件夹,里面的所有js文件都会参与编译。 

(3)编译后的js文件会被保存到myfolder_out文件夹中。


在.babelrc配置文件中指定"compact": true可以启用压缩,编译出来的js文件里面所有的空格和换行符都会消失。如果还想去掉注释,则还需要指定"comments": false。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/663133.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux安装教程 (centOS-7)

目录 安装 修改主机名 配置静态IP 镜像下载地址 https://mirrors.aliyun.com/centos/7.9.2009/isos/x86_64/CentOS-7-x86_64-DVD-2009.iso VMware Workstation Pro下载 VMware Workstation Pro各版本下载&#xff08;2024.5.5之后&#xff09;(Windows与Linux安装包不限…

关于 CSS 的那些事儿,我竟然都不知道

CSS 是一种美丽且复杂的技术&#xff0c;我们每天在工作中都会用到。然而&#xff0c;包括我在内的许多开发者都忽略了它的一些重要方面。 这很明显&#xff0c;因为在互联网上很难找到关于 CSS 的新知识或高级内容。大多数内容创作者只写一些热门话题&#xff0c;比如新语言、…

vbs执行报错vbs没有文件拓展,双击无法打开

如果看不到文件扩展名需要设置&#xff1a; 无法双击打开vbs 一般为注册表问题 解决办法 将下方代码保存为xxx.reg Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.VBS] "VBSFile" [HKEY_CLASSES_ROOT.VBS\PersistentHandler] "{5e941d80-bf96-…

【教学类-59-01】专注力视觉训练01(圆点百数图)

背景需求&#xff1a; 视觉训练的神奇效果&#xff0c;让你的宝贝成为焦点 - 小红书魔法视觉追踪-视觉训练—— &#x1f50d;视觉训练&#x1f50d; &#x1f539;想要提高宝宝的专注力&#xff0c;视觉训练是个绝佳方法&#xff01; &#x1f539;让宝宝仔细观察数字的路线&a…

展锐UIS7885+android13代码目录

文章目录 bsp目录1. bootloader1.1 chipram1.2 lk1.1 平台启动初始化代码目录1.2 命令实现、下载和启动等相关代码 2. kernel目录(如kernel5.4)2.1 设备树目录2.2 内核配置文件 bsp目录 1. bootloader 1.1 chipram 说明目录展锐芯片arch\arm\include arch\arm\cpu\armv8驱动…

Vue 实例

一、页面效果图 二、代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><script src"../vue.js" type"text/javascript"></script><title>vue 实例</title></head><body>&l…

与AI对话 --如何更好的使用AI工具

文章目录 与AI对话 --如何更好的使用AI工具1、认识AI工具&#xff1a;2、对话原则&#xff1a;3、提问步骤&#xff1a;4、AI可以学习什么&#xff1f;5、提问技巧&#xff1a;1、提出假设性问题:2、&#xff08;鼓励引导式提问&#xff09;跨学科思考:举个例子&#xff1a; 3、…

哪里能下载到合适的衣柜3D模型素材?

室内设计师在进行家居设计时&#xff0c;衣柜3D模型素材是非常重要的工具。那么&#xff0c;哪里能下载到合适的衣柜3D模型素材呢? 一、建e网&#xff1a; ①建e网是一个专注于3D模型素材分享的平台&#xff0c;上面可以找到大量的衣柜3D模型。 ②该网站提供的模型种类丰富&am…

证件照换底色推荐什么软件好?这五个可以随意换证件照底色

证件照&#xff0c;无论是考证还是工作&#xff0c;都是我们生活中不可或缺的一部分。 一张高质量的证件照&#xff0c;不仅能够展示我们专业的形象&#xff0c;还能在众多候选人中脱颖而出。像这种时候&#xff0c;我们就可以使用证件照制作软件啦&#xff01;无论是考证、护…

引导过程与服务控制06

引导过程与服务控制 一、引导过程 引导过程&#xff1a;当你按下开机的电源键直到屏幕显示登录的画面&#xff0c;这中间系统做的一些的开机过程。 1、开机自检&#xff08;BIOS&#xff09; 服务器开机之后&#xff0c;根据主板的bios设置&#xff0c;对cup 内存&#xff0…

sendmail发送邮件配置详解?如何正确设置?

sendmail发送邮件如何保障安全&#xff1f;AokSend有何安全措施&#xff1f; 为了确保sendmail发送邮件的高效性和安全性&#xff0c;正确配置是至关重要的。本文将详细介绍sendmail发送邮件的配置步骤&#xff0c;并探讨如何保障sendmail发送邮件的安全性。同时&#xff0c;我…

cesium本地文档-天空盒-arcgis切片404-服务查询

1.vite-plugin-cesium // vite-plugin-cesium 是一个 Vite 插件&#xff0c;用于在 Vite 项目中轻松集成和使用 Cesium 地图引擎。它简化了在 Vite 项目中使用 Cesium 的配置和引入过程。 // 具体来说&#xff0c;vite-plugin-cesium 主要提供了以下功能&#xff1a; // 自动…

人大金仓 KingBase查询死锁,释放死锁

人大金仓(kingbase)查询数据库死锁及释放 kingbase锁表排查以及释放锁 总结下 -- 查询&#xff0c;可自己添加where条件 SELECT * FROM sys_stat_activity WHERE state ! idle AND wait_event_typeLock-- 结束进程 SELECT sys_terminate_backend(pid);

JAVA:Random详解

Java中的java.util.Random类用于生成伪随机数。它提供了多种方法来生成不同类型的随机数&#xff0c;包括整数、浮点数和布尔值。以下是对Random类及其主要方法的详细介绍 一、生成随机数 创建一个Random对象&#xff0c;可以使用以下两种方式&#xff1a; 无参构造函数&…

qemu使用简介

安装qemu git clone https://github.com/qemu/qemu.git mkdir build cd build ../configure make -j16 make install 编译内核 wget https://mirror.bjtu.edu.cn/kernel/linux/kernel/v5.x/linux-5.10.tar.xz tar -xf linux-5.10.tar.xzsudo apt-get install gcc-arm-linux-g…

利用C++与Python调用千帆免费大模型,构建个性化AI对话系统

千帆大模型已于2024年4月25日正式免费&#xff0c;调用这个免费的模型以实现自己的AI对话功能&#xff0c;遵循以下步骤&#xff1a; 了解千帆大模型&#xff1a; 千帆大模型是百度智能云推出的一个平台&#xff0c;提供了一系列AI能力和工具&#xff0c;用于快速开发和应用A…

Three.js 中的场景与相机基础

Three.js 中的场景与相机基础 一、场景&#xff08;Scene&#xff09; 在 Three.js 中&#xff0c;场景是所有 3D 对象存在和交互的容器。艾斯视觉作为行业ui设计与前端开发服务商很高兴能在这里与你共同探讨&#xff1a;它就像是一个虚拟的 3D 空间&#xff0c;我们可以在其中…

docker安装nacos单机部署

话不多说,直接进入主题 1.查看nacos镜像 docker search nacos 一般选第一个也就是starts最高的。 2.拉取nacos镜像 docker pull nacos/nacos-serverdocker pull nacos/nacos-server:1.4.1 由于我使用的项目alibabacloud版本对应的是nacos1.4.1版本的,所以我安装的是1.4.1…

Data Lakehouse:你的下一个数据仓库

作者&#xff1a;张友东 StarRocks TSC member/镜舟科技 CTO 数据分析是现代企业和组织决策过程中不可或缺的一部分&#xff0c;数据分析技术经过数十年的发展&#xff0c;需求场景从 BI 报表到数据探寻、实时预测、用户画像等不断丰富&#xff0c;技术架构经历从数据仓库、数据…

中学生学人工智能系列:如何用AI学英语

经常有读者朋友给公众号《人工智能怎么学》留言咨询如何使用人工智能学习语文、数学、英语等科目。这些都是中学教师、中学生朋友及其家长们普遍关注的问题。仅仅使用留言回复的方式&#xff0c;不可能对这些问题做出具体和透彻的解答&#xff0c;因此本公众号近期将推出中学生…