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

news2024/11/24 17:09:42

在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下也能运行。

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[集群聊天服务器]----(五)User类、UserModel类

接着上文[集群聊天服务器]----(四)MySQL数据库模块&#xff0c;接下来我们对User类、UserModel类进行剖析&#xff0c;User表和UserModel类是项目最基本也是最重要的部分&#xff0c;通过它我们对用户的id&#xff0c;用户名&#xff0c;密码&#xff0c;状态相关信息进行存储&…

VSCode运行CMake教程

参考视频&#xff1a; https://www.youtube.com/watch?vm9HBM1m_EMU 首先下载&安装opencv包以及cmake包 接着配置环境变量 点击环境变量 ---下面系统变量的path 找对应路径 添加后三个: 确定即可 接着创建空目录 右击vscode打开 扩展中安装 c tools、cmake、cmake too…

华为芯片与系统详细梳理--Kirin麒麟 Ascend昇腾 Kunpeng鲲鹏 HarmonyOS鸿蒙 Euler欧拉

华为芯片与系统详细梳理--Kirin麒麟 & Ascend昇腾 & Kunpeng鲲鹏 & HarmonyOS鸿蒙 & Euler欧拉 1 概述2 芯片2.1 整体描述麒麟芯片&#xff08;To C&#xff09;【面向智能终端】昇腾芯片【面向AI计算】鲲鹏芯片【面向通用计算】 2.2 细分系列麒麟芯片&#xf…

基于UDP的tftp的文件传输

#define SER_PORT 69 #define SER_IP "192.168.125.71" #define CLT_PORT 6666 #define CLT_IP "192.168.125.158" int main(int argc, const char *argv[]) {//创建套接字文件描述符int cfd socket(AF_INET,SOCK_DGRAM,0);if(cfd -1){perror("sock…

Hadoop3:HDFS的Fsimage和Edits文件介绍

一、概念 Fsimage文件&#xff1a;HDFS文件系统元数据的一个永久性的检查点&#xff0c;其中包含HDFS文件系统的所有目 录和文件inode的序列化信息。 Edits文件&#xff1a;存放HDFS文件系统的所有更新操作的路径&#xff0c;文件系统客户端执行的所有写操作首先 会被记录到Ed…

掌握RESTful API:从入门到精通,全面解析Web开发的基石!

在现代Web开发中&#xff0c;API&#xff08;应用程序编程接口&#xff09;已经成为不同系统之间通信的重要手段。其中&#xff0c;RESTful API是一种基于HTTP协议的设计风格&#xff0c;它简洁、易用且高效。作为一个资深的技术人员&#xff0c;本文将全面详细地介绍RESTful A…

VM逆向,一篇就够了(下)

实战三 d3sky 这一题需要了解一些TLS相关知识 TLS回调函数 TLS&#xff08;Thread Local Storage&#xff0c;线程局部存储&#xff09;是各线程的独立的存储空间&#xff0c;TLS回调函数是指&#xff0c;每当创建或终止进程的线程时会自动调用执行的函数&#xff0c;且调用…

蓝桥杯Web开发【国赛】2022年真题

1.水果拼盘 目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方案&#xff0c;本题可以使用 Flex 属性快速完成布局。 1.1 题目问题 建议使用 flex 相关属性完成 css/style.css 中的 TODO 部分。 禁止修改圆盘的位置和图片的大小。相同颜色的水果放在相同颜色的…

[Unity报错] The type or namespace name ‘Newtonsoft‘ could not be found

简介 Unity在跑别人的代码时&#xff0c;控制台报了以下错误 The type or namespace name Newtonsoft could not be found 鉴于这块资料较少&#xff0c;写一下教程帮助后来者。 报错的原因主要是因为缺少Newtonsoft.json这个包&#xff0c;导致Unity在using该库时出现错误。…

振动盘配上智能相机后实现全自动化

#智能相机 #振动盘 振动盘配上智能相机后的全自动化技术正在各个行业蓬勃发展。振动盘是一种利用震动作用将物料快速分离和输送的装置&#xff0c;而智能相机的高精度图像识别技术能够准确探测和捕捉物料。将两者结合起来&#xff0c;不仅能提高生产效率&#xff0c;还能降低人…

AI爆文写作:标题需要什么?情绪炸裂,态度要激烈,行为要夸张!

现在这个传播环境下&#xff0c;在公域中&#xff0c;轻声细语&#xff0c;慢慢的说&#xff0c;无法吸引到注意&#xff0c;没有人搭理。 标题要需要情绪张扬&#xff0c;态度激烈&#xff0c;行为夸张&#xff0c;大声喧闹。 唐韧的用户群是互联网产品经理&#xff0c;阅读量…

开源实用!猫抓媒体嗅探浏览器插件

CatCatch&#xff1a;网络资源&#xff0c;一触即发 - 精选真开源&#xff0c;释放新价值。 概览 CatCatch是一个专为浏览器设计的资源嗅探扩展&#xff0c;旨在帮助用户轻松捕获和分析网页中的各种资源。无论是视频、音频还是其他类型的文件&#xff0c;猫爪都能提供直观的界…

了解K8s集群kubectl命令进行陈述式资源管理

前言 在 Kubernetes 集群中&#xff0c;通过陈述式和声明式资源管理是确保应用程序高效运行的关键。认识这两种管理方法&#xff0c;能够更好地掌握 Kubernetes 集群的运维和管理。 目录 一、K8s 资源管理操作分类 1. 陈述式 2. 声明式 3. K8s 集群管理常用命令概览 二…

五分钟”手撕“图书管理系统

前言&#xff1a; 图书馆管理系统需要结合JavaSE的绝大部分知识&#xff0c;是一个很好的训练项目。 为了让大家更加方便的查阅与学习&#xff0c;我把代码放开头&#xff0c;供大家查询。 还有对代码的分析&#xff0c;我将以类为单位分开讲解。 目录 全部代码 Main类 Us…

【NumPy】NumPy实战入门:线性代数(dot、linalg)与随机数(numpy.random)详解

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

redis--redis Cluster

简介 解决了redis单机写入的瓶颈问题&#xff0c;即单机的redis写入性能受限于单机的内存大小、并发数量、网卡速率等因素无中心架构的redis cluster机制&#xff0c;在无中心的redis集群当中&#xff0c;其每个节点保存当前节点数据和整个集群状态,每个节点都和其他所有节点连…

高阶路由过渡处理方案 —— 浏览器堆栈主动介入

目录 01: 前言 02: VueRouter 过渡动效可行性分析 03: 主动介入浏览器堆栈管理&#xff0c;分析可行性方案 04: 主动介入浏览器堆栈管理 05: 基于 GSAP 实现高阶路由过渡动画分析 06: 基于 GSAP 实现高阶路由过渡动画处理 07: 通用组件&#xff1a;navbar 构建方案分析…

202206青少年软件编程(Python)等级考试试卷(三级)

第 1 题 【单选题】 下图所示, 有一个名为"书目.csv"的文件。 小明针对这个文件编写了 5 行代码,请问, 代码运行到最后打印在屏幕上的结果是? ( ) with open(书目.csv, r, encoding=utf-8) as f:for line in f.readlines

Rabbitmq-Windows 安装

第一步&#xff1a;下载并安装erlang &#xff11;.原因&#xff1a;RabbitMQ服务端代码是使用并发式语言Erlang编写的&#xff0c;安装Rabbit MQ的前提是安装Erlang &#xff12;.下载地址&#xff1a;http://www.erlang.org/downloads 3.双击&#xff0c;点next就可以 4.选…

【网络技术】【Kali Linux】Wireshark嗅探(十四)QUIC(快速UDP互联网连接)协议报文捕获及分析

往期 Kali Linux 上的 Wireshark 嗅探实验见博客&#xff1a; 【网络技术】【Kali Linux】Wireshark嗅探&#xff08;一&#xff09;ping 和 ICMP 【网络技术】【Kali Linux】Wireshark嗅探&#xff08;二&#xff09;TCP 协议 【网络技术】【Kali Linux】Wireshark嗅探&…