使用babel.js 和 polyfill.js 使IE浏览器兼容ES6

最新推荐文章于 2024-04-23 12:01:21 发布
最新推荐文章于 2024-04-23 12:01:21 发布
阅读量5.5k 收藏 6
点赞数 2
分类专栏： js IE浏览器 es6 文章标签： js es6 ie babel html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/asderxiao/article/details/117773548
版权
js 同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
IE浏览器
1 篇文章 0 订阅
订阅专栏
es6
1 篇文章 0 订阅
订阅专栏

使用babel.js 和 polyfill.js 使IE浏览器兼容ES6

项目情况

项目开发基本结束，现在要求兼容IE。页面使用HTML+JS编写。其中封装的http请求的js用到箭头函数，导致ie打不开项目。所以此文章只适用于HTML+JS框架。

准备工作

js文件下载

https://unpkg.com/babel-standalone@6/babel.min.js
复制babel.js

npm install --save babel-polyfill
在 node_modules\babel-polyfill\dist\ 文件夹中找到polyfill.js

也可以在csdn上下载
babel.rar

测试代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>-</title>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/javascript" src="node_modules\babel-polyfill\dist\polyfill.min.js"></script>
    <script type="text/babel">
 
      var arrayLike = {
          '0': 1,
          '1': 2,
          '2': 3,
          length: 3
      };
      // Array.from为ES6新添加的方法
      var arr2 = Array.from(arrayLike, x => x + x);
      console.log(arr2); // [2, 4, 6]
       
    </script>
  </head>
  <body>
  </body>
</html>

注意js的路径
如果可以在Chrome和IE浏览器都可以在开发者模式中看到对应输出则页面可以正常使用

使用说明

js标签变更

HTML里或者引入的js包含了ES6的要使用 type="text/babel"

<script type="text/babel">
	//js
</script>

<script src="content/js/httpRequest.js" type="text/babel"></script>

不包含ES6的js可以不动

属性定义

所有的属性都必须定义
引用必须放在定义之后

var mygrid = $.getDataGrid($("#gridList"), {
     url: actionUrl + "listPage"/*"GetPageGrid"*/,
     colModel: [
         {
             label: '设备', name: 'equId', width: 120, align: 'center',
             formatter: function (cellvalue, options, row) {
                 return dataEqu[cellvalue] == null ? "" : dataEqu[cellvalue];
             }
         },
         {label: '测点ID', name: 'pointId', width: 80, align: 'center', key: true},
         {label: '测点序号', name: 'pointNum', width: 60, align: 'center'},
         {label: '测点名称', name: 'pointName', width: 200, align: 'center'},
         {label: '测点编码', name: 'codeName', width: 100, align: 'center'},
         {label: '备注', name: 'remark', width: 100, align: 'center'},
         {label: '倍率', name: 'multiply', width: 100, align: 'center'}
         // { label: '显示顺序', name: 'showOrder', width: 100, align: 'center' }
         // { label: '状态', name: 'status', width: 100, align: 'center' }

     ],
     pager: "#gridPager",
     //multiselect: true,
     //sortname: "pointID"
 });
 $(function () {
     vm.getEquipment();

     mygrid.dataBind();
 })

例子里有个特殊情况，mygrid 不能在其他地方声明，否则表格失效。目前不清楚原因。猜测是重编译js后导致的bug

技巧

  • 在引入了babel.js 和 polyfill.js后，Chrome和IE的表达近似。可以在Chrome里先保证功能正常，再去IE浏览器里处理细节。
  • 如果部分代码无异常但是不生效可以考虑加 type=“text/babel” 测试一下。
  • IE不行
asderxiao
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
babel.js和polyfill.js
12-11
babel.js和polyfill.js,可以解决es6语法和API兼容IE浏览器问题，使用方法具体见https://blog.csdn.net/qq_32202099/article/details/109813837
polyfill.min.js下载
04-27
Babel 默认只转换新的 JavaScript 句法，polyfill.min.js可以转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象
[Vue.js] 使用 babel-polyfill 解决IE浏览器 正常使用
总结前端开发中遇到的问题，分享前端知识
09-26 9703
在 Vue 中我们会使用 axios 来存取 api ，但是 axios 会使用到 ES6 的 Promise ，所以 IE 会不支持，所以要用 babel-polyfill 来来将ES6 的语法转成ES5。 另附地址ES6转ES5在线工具：https://www.babeljs.cn/repl 安装babel-polyfill 因为polyfill 要在编译你的代码之前执行，所以...
Vue使用babel-polyfill兼容IE解决白屏及语法报错
qq_20805769的博客
03-10 4931
解决vue elementUI项目使用webpack打包上线后，服务器环境下IE报语法错误及白屏问题 在最近的项目中，在使用webpack打包后发布，有用户反馈使用IE浏览器访问会白屏，这就不能忍受了，经过排查发现，发生这个错误应该是有文件没有由ES6转ES5语法造成，而IE不兼容该语法 既然问题找到了，那就找到那应该解决起来就容易了，然后事实上并没有我想的那么简单，话不多说，直接开始。 首先，通用的方式就是，项目中引入babel-polyfill，安装方法可以自行百度，在这里我直接上命令： npm i
Vue中 引入使用 babel-polyfill 兼容低版本浏览器
明天也要努力的博客
02-19 7213
Babel 中文官方文档Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：1. 语法转换；2. 通过 Polyfill 方式在目标环境中添加缺失的特性 （通过引入第三方 polyfill 模块，例如 core-js）；3. 源码转换（codemods）；
polyfill.js:一个为 polyfill.js 客户端框架提供服务的 node.js 应用程序
06-18
polyfill.js 版本：2.0.0 版权所有 2015 詹姆斯布鲁蒙德 根据 ISC 获得许可 一个 JavaScript Polyfill 框架 polyfill.js 是一个非常轻量级的JavaScript 框架，用于替换过时浏览器中缺失的功能。 只需将以下脚本标记添加到您的文档即可加载它： < script type =" text/javascript " src =" http://polyfill.herokuapp.com/core " > </ script > polyfill.js 的核心非常小，你只需要加载你需要的 polyfill。 例如，如果你想在你的应用程序中使用 localStorage、EventSource 和 Array.prototype.forEach，你告诉 polyfill.js 你需要它们，它检查你是否已经拥有它们，然后只加载你
Polyfill
顺其自然~专栏
03-30 1650
引言 最近的工作中业务方需要兼容IE浏览器，众所周知，IE这个反人类的东西，微软自己都抛弃了。谁叫甲方爸爸想要呢。使用过程中发现IE这东西吧很奇葩，常见的axios和ES6的一些常用的语法糖都不支持，总不能项目使用ES5重写吧。经过寻找发现了polyfill这东西。 原因就是使用到了ES6的语法，比如在IE浏览器中会出现“promise未定义“的问题 1.在项目中安装babel-polyfill 2.在main.js中引入 import "babel-polyfill" 3.修改配置文件，即在we
javascript中的polyfill是什么，polyfill和babel的关系
qq_17335549的博客
11-29 2539
javascript中的polyfill是什么，polyfill和babel的关系
Polyfill简介
dong123ohyes的专栏
05-03 1676
1.什么是Polyfill? Polyfill是一个js库，主要抚平不同浏览器之间对js实现的差异。比如，html5的storage(session,local), 不同浏览器，不同版本，有些支持，有些不支持。Polyfill（Polyfill有很多，在GitHub上https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills），帮你把这些差异化抹平，不支持的变得支持了（典型做法是在IE浏览器中增加 window.XML
babel-polyfill的几种使用方法
weixin_41224029的博客
05-14 8558
前言 preset与plugin的关系: preset中已经包含了一组用来转换ES@next的语法的插件,如果只使用少数新特性而非大多数新特性,可以不使用preset而只使用对应的转换插件 babel默认只转换语法,而不转换新的API,如需使用新的API,还需要使用对应的转换插件或者polyfill 使用转换插件:babel-plugin-transform-xxx 使用方法 缺啥补啥,在pac...
使用 babel.min.js让es6的语法全部编译成es5的
10-05
es6的语法有些浏览器是不兼容的，babel可以把es6的语法全部编译成es5的，兼容所有浏览器
babel.js 和 polyfill.js 使IE浏览器兼容ES6 babel.rar
06-10
babel.js 和 polyfill.js 使IE浏览器兼容ES6
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
11-23
判断是否IE浏览器用的是window.navigator.userAgent，跟踪这个信息，发现在开发环境，识别为IE10，但访问服务器则识别为IE11，但IE11的userAgent里是没有MSIE标志的，原因就是这个了。 把判断IE浏览器的方法改成如下就可以了。 function isIE() { //ie? if (!!window.ActiveXObject || "ActiveXObject" in window) return true; else return false; } 下面是一些分享，大家可以看下，很实用的分析解说 在很多时候，我们一般采用navigat
polyfill.min.js
09-01
polyfill.min.js
babel+babel-polyfill兼容IE,ES6转ES5
09-03
使用babel，把写好的es6代码，转化为es5，让ie8兼容。
ES6 - 语法糖
最新发布
sodakii的博客
04-23 279
这些语法糖和方法使代码更简洁、易读和功能更强大。
vue2 里面es6语法怎么兼容ie浏览器
02-15
你可以在你的 Vue 项目中使用 Babel 来转换你的 ES6 代码。Babel 是一个 JavaScript 编译器，它可以将高级 JavaScript 特性（如箭头函数和类）转换为浏览器可以理解的代码。 你需要在你的 Vue 项目中安装 Babel，然后在你的项目的 build 配置中配置 Babel 转换你的代码。 首先，安装 Babel： ```bash npm install --save-dev babel-cli babel-preset-env ``` 然后，在你的项目的 build 配置中添加一个 babel 配置： ```js module.exports = { // ... build: { // ... babel: { presets: ['env'] } } } ``` 这样，当你使用 Vue-CLI 构建项目时，Babel 将会转换你的 ES6 代码，使它可以在 IE 浏览器中运行。 你也可以使用 polyfills 来兼容某些 ES6 特性。 polyfills 是模拟这些特性的库，使你可以在不支持这些特性的浏览器中使用它们。 你可以使用 @babel/polyfill 来为你的项目提供 polyfills： ```bash npm install --save @babel/polyfill ``` 然后，在你的入口文件（例如 main.js）中引入 @babel/polyfill： ```js import '@babel/polyfill' ``` 这样，当你使用 Vue-CLI 构建项目时，Babel 将会为你的项目提供 polyfills，使它可以在更多的浏览器中运行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值