在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"
    ],
    "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.mzph.cn/news/840231.shtml

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

相关文章

AI爆文写作:关注热点,提前埋伏好关键词,吃系统的热点推荐,吃搜索流量,让你的文章直接爆了!

做内容&#xff0c;要对热点敏感。 小米汽车的发布会时间&#xff0c;我们是不是提前就知道&#xff0c;发布会前&#xff0c;大家最关注的就是价格。 你看这个相关关键词搜索&#xff0c;10W太多了。 我看到有博主在发布会前&#xff0c;埋伏了一篇&#xff0c;公众号也有推…

读人工智能时代与人类未来笔记13_网络57

1. jun背控制 1.1. 威慑的目的是通过威胁发动盒站来防止盒站 1.2. jun背控制的目的是通过限制甚至废除57&#xff08;或57类别&#xff09;本身来防止盒站真 1.2.1. 与盒不扩散相配合&#xff0c;以一整套详尽的条约、技术保障措施、监管和其他控制机制为支撑&#xff0c;所…

B站pink老师CSS学习(二)

文章目录 一、emmet语法1.快速生成HTML结构语法 二、复合选择器1.什么是复合选择器2.后代选择器3.子选择器4.并集选择器5.伪类选择器6.链接伪类选择器7&#xff1a;focus伪类选择器8.总结 三、元素的显示模式1.什么是元素显示模式2.块元素3.行内元素4.行内块元素5.总结6.元素显…

15、Go Gin常见响应返回详解

一、各种数据格式的响应 json、结构体、XML、YAML类似于java的properties、ProtoBuf package mainimport ("github.com/gin-gonic/gin""github.com/gin-gonic/gin/testdata/protoexample" )// 多种响应方式 func main() {// 1.创建路由// 默认使用了2个中…

Linux中使用chmod命令修改文件和文件夹的权限

要使一个文件夹及其子文件夹中的文件不允许新建文件和改写文件&#xff0c;你可以使用chmod命令修改文件和文件夹的权限。在Linux中&#xff0c;chmod可以用来更改文件系统中文件和目录的访问权限。 对于你的需求&#xff0c;你可以先将文件夹及其子文件夹中所有内容设置为只读…

08.1.jenkins安装方法

安装 配置官方下载源 #配置jenkins源 sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key下载jak、jenkins服务 #下载jdk11环境&#xff0c;并且配置yu…

R实验 非参数性检验

实验目的&#xff1a; 掌握列联表检验&#xff08;Pearson c2独立性检验&#xff09;&#xff0c;掌握Fisher精确独立性检验&#xff0c;初步掌握三维列联表条件独立性检验&#xff1b; 掌握三个相关性检验&#xff1a;Pearson相关性检验&#xff0c;Spearman秩相关检验&…

C++ | Leetcode C++题解之第110题平衡二叉树

题目&#xff1a; 题解&#xff1a; class Solution { public:int height(TreeNode* root) {if (root NULL) {return 0;}int leftHeight height(root->left);int rightHeight height(root->right);if (leftHeight -1 || rightHeight -1 || abs(leftHeight - rightH…

10.3.k8s的附加组件-图形化管理工具dashboard

目录 一、dashboard介绍 二、部署安装dashboard组件 1.下载dashboard本地文件 2.修改nodeport的端口范围 3.创建和查看dashboard 4.电脑浏览器访问测试 5.token登录方式登录dashboard 5.1.查看dashboard的token 5.2.继续查看用户token的secrets资源详细信息 5.3.复制…

【Linux】icmp_seq=1 Destination Host Unreachable

执行ping 命令提示&#xff1a;From 192.168.XX.XX icmp_seq1 Destination Host Unreachable 这个错误消息通常表示以下几种情况之一&#xff1a; 网络连接问题&#xff1a;目标主机可能没有连接到网络&#xff0c;或者网络中的某个路由器无法将数据包转发到目标主机。 目标主…

Kafka之【存储消息】

Kafka之【存储消息】

推荐算法教程(个人总结)

推荐算法是一类用于推荐系统的算法&#xff0c;通过分析用户行为和偏好&#xff0c;向用户推荐个性化的内容或产品。常见的推荐算法包括协同过滤&#xff08;Collaborative Filtering&#xff09;、基于内容的推荐&#xff08;Content-Based Filtering&#xff09;、矩阵分解&a…

Python库之Scrapy的高级用法深度解析

Python库之Scrapy的高级用法深度解析 引言 Scrapy是一个强大的Web爬虫框架&#xff0c;它提供了丰富的功能和灵活的扩展性&#xff0c;使得在Python中编写爬虫变得简单而高效。本文将深入探讨Scrapy的高级用法&#xff0c;帮助读者充分利用Scrapy的强大功能。 目录 引言Scr…

软考--软件设计师-刷题总结

一、数据结构 贪心算法 归并排序将问题先分解、再处理、再合并的方式采用了分治法的思想 分治法&#xff1a;将一个大问题分成若干个小问题 希尔排序&#xff1a; 定义一个 i 变量指向这一组的第二个数据&#xff0c;定义一个 j 变量指向 i - gap 的位置。 将 i 下标的值放到…

leetcode热题100.完全平方数(动态规划进阶)

前言 作者&#xff1a;晓宜 &#xff0c;大厂准入职小白 最近毕业论文快搞完了&#xff0c;打算把之前坚持的hot100系列文章更完&#xff0c;帮助大家更好的通过面试和笔试&#xff0c;都拿到大厂offer&#xff0c;大家快跟着刷起来呀。 从今天起立一个flag&#xff0c;每天更新…

那些网络安全上的事实,很多人不见得知道!

明月发现不少小白对网络安全的认知几乎为零&#xff0c;甚至明月还碰到一个说 VPN 能彻底隐匿自己的&#xff0c;至于现在这帮动不动就利用 DDos/CC 攻击被人网站来推销境外高防服务器、高防 CDN 的老鼠屎们更是网络安全知识白痴的水平&#xff0c;破坏和攻击的水平完全取决于能…

AI爆文写作:如何写出令人看一眼就想点击的爆款标题?

一、好标题要素(以公众号文章为例) 1. 热点、名人:热点事件、名人自带流量 董宇辉最新演讲刷屏:孩子未来20年的差距,是这样拉开的》 《读懂了杨绛,你就不再抱怨人生》 《江西彩礼38.8w上热搜:好的婚姻,不是侃价钱,而是看家庭》 2 悬疑:带着疑问,或反常识的观点,…

mac版本Phpstudy本地环境安装Discuz教程【2024】

此方法适用于m1版本的mac版本Phpstudy本地环境安装Discuz&#xff0c;当然同样使用更高版本的mac端。网上各种安装教程参差不齐&#xff0c;根本解决不了小白的入门需求&#xff0c;以下是最新且直接明了的安装教程。 Phpstudy本地环境安装Discuz教程&#xff1a; 1、安装Phps…

c++ vector实现出现的一些问题

目录 前言&#xff1a; 浅拷贝问题: typename指定类型&#xff1a; 前言&#xff1a; 最近学习了c vector的使用&#xff0c;然后也自己实现了一下vector的部分重要的功能。然后在其中出现了一些问题&#xff0c;在这就主要记录一下我解决哪些bug。 浅拷贝问题: 在实现res…

第四十三天 | 416.分割等和子集 1049.最后一块石头的重量|| 494.目标和

题目&#xff1a;416.分割等和子集 思路&#xff1a;只要找到集合里能够出现sum/2的子集总和&#xff0c;就算是可以分割成两个相同元素和子集了。 1.dp[j]含义&#xff1a;背包容量为j时&#xff0c;放进物品后&#xff0c;背的最大重量为dp[j] 那么如果背包容量为target&a…