解决IE识别ES6语法

最新推荐文章于 2023-07-31 13:24:55 发布

~~帅~~

最新推荐文章于 2023-07-31 13:24:55 发布

阅读量7.5k

点赞数 1

文章标签： ie识别es6语法 babel转转es6

本文链接：https://blog.csdn.net/qq_40652539/article/details/84850473

版权

使用jq做项目时，混用了部分es6的语法，导致在IE下项目无法正常运行，于是乎，便在网上找到了下面两种方法，并尝试了一下：

一、直接在浏览器中引入browser.min.js，并且将script的type设置成text/babel

尝试了在网上下载browser.min.js，结果使用时会报错，所以使用下面的方式生成browser.min.js：
1、安装Node
2、node安装成功后，使用npm安装babel
打开命令提示符窗口输入命令：npm install babel-core@5，然后回车，安装成功后在电脑盘中找到目录：C:\Users\Administrator\node_modules\babel-core，在这个目录里面我们找到babel的浏览器版本browser.js(未压缩版)和browser.min.js(压缩版)
3、使用browser.min.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <!-- 引入browser.min.js -->
        <script src="js/browser.min.js"></script>
    </head>
    <body>
        <input type="button" value="测试按钮" onclick="aa()">
    </body>
</html>
<!-- script标签的 type 设置为 text/babel -->
<script type="text/babel">
	// 点击 测试按钮 时，控制台报：aa未定义
    function aa () {
        alert('测试')
    }

    console.log('=====')
    const arr1=[1,2,3]
    const arr2=[...arr1]
    console.log(arr2);              // [1,2,3]
    let arr3=arr2.map((x)=>x*2)
    console.log(arr3);              // [2,4,6]
    const [x,y,z]=[[...arr3]]
    console.log(x);                 // [2,4,6]

    class Point {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }

        toString() {
            return '(' + this.x + ', ' + this.y + ')';
        }
    }
    console.log(new Point(1, 2).toString());

</script>

注：这种方法虽然让ie识别了es6的语法，但是text/babel中的代码不被浏览器当做javascript进行解析，所以当点击input时，浏览器会报 aa未定义的错误

二、通过babel进行es6转es5

1、新建工程初始化项目
新建项目文件夹并起名为es6，然后在里面创建src、dist两个文件夹（其中src目录中为项目源码，即待转换的代码；dist目录中为转换完成的代码），结构如下图：
在这里插入图片描述
2、初始化项目
打开命令提示符窗口，并进入我的项目文件夹中，输入命令：npm init进行初始化项目，按照提示输如相应内容，初始化成功后，项目文件夹中会生成package.json文件
3、安装babel工具
全局安装命令： npm install -g babel-cli
或者
将babel安装在项目中，需要在项目根目录下执行命令：npm install babel-cli --save-dev；同时它会自动在package.json文件中的devDependencies中加入babel-cli

建议使用将babel安装在项目中，防止不同环境下的babel版本不同而报错

4、babel安装成功后，需要安装转换包才能进行转换
输入命令：
npm install --save-dev babel-preset-es2015( ES2015转码规则 )

完成第3、4步后，package.json中会自动添加如下配置信息：
在这里插入图片描述
5、新建 .babelrc
在项目根目录创建.babelrc文件，该文件为babel的配置文件，用来设置转码规则和插件，然后将上面安装的转码规则加入到presets中，内容如下：

6、进行转换
在命令行窗口输入命令： babel src --out-dir dist或者babel src -d dist可以从src目录转换到dist
或者
通过在package.json文件中设置别名，然后在命令串口输入命令：npm run build来进行编译，如下图：
在这里插入图片描述

babel的基本用法：

单文件转码：
将转码结果写入一个文件，通过--out-file或 -o参数指定输出文件，命令为：
babel example.js --out-file compiled.js
或者
babel example.js -o compiled.js
整个目录转码：
通过--out-dir或 -d参数指定输出目录，命令为：
babel src --out-dir lib
或者
babel src -d lib
生成source map文件：
babel src -d lib -s

注：这种方法只能转换单独的js文件，对于写在html中的js无法转换

总结：对于需要ie兼容的，尽量使用es5的语法，或者对于上面两种方法所碰到的问题，有更好的解决方法的还望告知一下，谢谢…

~~帅~~

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
解决IE识别ES6语法

使用jq做项目时，混用了部分es6的语法，导致在IE下项目无法正常运行，于是乎，便在网上找到了下面两种方法，并尝试了一下：一、直接在浏览器中引入browser.min.js，并且将script的type设置成text/babel尝试了在网上下载browser.min.js，结果使用时会报错，所以使用下面的方式生成browser.min.js：1、安装Node2、node安装成功后，使用n...
复制链接

扫一扫