首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Babel 7不能在IE11中多填Promise、Fetch和一些JavaScript文件(如在供应商文件中

使用Promise和Fetch的问题是因为Babel 7默认不转译ES6的Promise和Fetch语法,以及一些其他ES6+的新特性。这导致在IE11中无法正确运行这些代码。

解决这个问题的方法是使用Babel的插件来转译这些语法。具体来说,你可以使用"@babel/preset-env"插件来指定需要转译的目标浏览器版本,包括IE11。同时,你还需要安装"core-js"库来提供Promise和Fetch的polyfill。

以下是一种可能的配置方式:

  1. 首先,安装必要的依赖:
代码语言:txt
复制
npm install --save-dev @babel/preset-env core-js
  1. 在项目根目录下创建一个.babelrc文件,并添加以下内容:
代码语言:txt
复制
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}
  1. 在你的构建工具(如Webpack)的配置文件中,添加Babel的loader,并确保它会处理你的JavaScript文件:
代码语言:txt
复制
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}

这样配置之后,Babel会将你的代码转译为兼容IE11的版本,并自动引入所需的polyfill。

关于Babel和相关概念的更多信息,你可以参考腾讯云的产品介绍链接地址:Babel 7产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript、ES6、ES7 到 ES10,你学到哪儿了?

Babel ES6 诞生以来都发生了什么,什么已完全集成? 一些历史扫盲 我认为让你重新了解某项目的不同阶段是很有用的。 ? 当他们这么做的时候,我真的不知道这究竟代表什么。...顺便说一下,所有这些功能在所有浏览器中都得到正式支持。换句话说,不管你使用哪个浏览器都不需要 Babel(除非你需要支持 IE 11)。 在 ES6 ,我们能够得到: 创建和继承类的能力。...关于在 ES7(ES2016) ,以下是我们能够得到的。...它还允许你执行 fetch 操作或者执行操作。...与不支持 IE11 所失去的金钱相比,支持 IE11 是否会给你带来更多的收入?为 IE11 开发不只是使用 Babel

1.6K20

Vue项目兼容IE11

由于开发过程,我们经常会使用一些第三方插件或组件,对于这些组件,有时我们需要做一些处理。下述主要阐述如何使用 vue-cli3 脚手架搭建的工程支持 IE11。...这个值会被 @babel/preset-env Autoprefixer 用来确定需要转译的 JavaScript 特性需要添加的 CSS 浏览器前缀。...transpileDependencies 默认情况下 babel-loader 会忽略所有 node_modules 文件。...css polyfill 由于我们项目中,大量使用了 CSS var() ,IE11 兼容导致,思路相同,寻找相应的 polyfill 即可。...总结 总之,所有的处理都是围绕转换成 IE11 可以兼容的方式去处理。对于 JavaScript 语法,即是对 babel 的控制;对于 CSS 语法,需要特定分析。

7.1K41
  • 前端工程化发展历史

    之前这些非常混乱,现在由于有 ECMAScript 的 7 个版本,一切都变得很清晰了, 7 个版本?那 ES5 ES2016+ 属于? 分别是第 5 个7 个版本。...好吧,所以我需要引入 React 、 React Dom Babel 这三个库来拉取数据展示 HTML 表格吗? 是的,但你还需要用一个模块管理器把这三个库打包成一个文件。... Browserify 以及 Webpack 1.x 不同,SystemJS 可以动态加载模块,允许你将不同模块打包成不同文件,而不是打包到一个大文件。...如果要用 await ,Babel 需要进行相应的配置。 对的。 这样我就能使用 FetchPromise 这些神奇的东西了。...我觉得我追不上这么的变化,各种版本号,还有各种编译器转换器。javaScript 社区真是太疯狂了,它觉得每个人能跟上这么快的变化吗。 哈哈,你应该去了解一下 Python 社区。 为什么?

    78820

    Babel配置傻傻看不懂?

    前沿:文章起源在于,朋友跟树酱说在解决项目兼容IE11浏览器过程,遇到“眼花缭乱”的babel配置插件等,傻傻分不清配置间的区别、以及不了解如何引用babel插件才能让性能更佳,如果你也有这方面的疑虑...那么Babel就是帮助浏览器翻译的,让web应用能够运行旧版本的浏览器,比如IE11浏览器不支持Promise等ES6语法,那这个时候在IE11打开你写的web应用,应用就无法正常运行,这时候就需要Babel...,如下所示 1.4.3 关于 polyfill 比如我们在开发中使用,会使用到一些es6的新特征比如Array.from等,但不是所有的 JavaScript 环境都支持 Array.from,这个时候我们可以使用...♂️:缺点:全局引入整个 polyfill包,如promise会被全局引入,污染全局环境,所以建议使用,那有没有更好的方式?...答;@babel是在babel7版本提出来的,就类似于 vue-cli 升级后使用@vue/cli一样的道理,所以babel7以后的版本都是使用 @babel 开头声明作用域, 2.vue相关的babel

    1.3K43

    记一次小程序开发如何使用async-await并封装公共异步请求

    3.当然es6promise倒是很好的解决了这样的问题,再配合es7的asyncawait就更完美了,await返回的也是一个promise对象,这个关于promiseasync,await的使用方法就不说了...实现方案 首先小程序目前还是不支持es7的asyncawait的,那么如何让它支持呢 1、点击下载 regenerator,并把下载好的runtime.js文件夹放到自己小程序的utils目录下...,包总共才20kb,体积很小的。...总结 1、首先先明白babelpolyfill分别干啥的; Babel 是一个广泛使用的转码器,Babel 默认只转换新的 JavaScript 句法,而转换新的 API。...3、在明白上面的意思之后,还需要明白的是,babel-polyfill是一股脑把全部都给你添加到js文件,而现在的runtime将会判断你哪些需要加载的,有选择性的进行加载,并且后者也不会污染全局变量

    1.4K20

    前端-学习JavaScript是一种什么样的体验?

    我对今年的技术别提熟了,前端可视化、音乐播放器、能踢足球的无人机,你尽管问吧。我刚去 JS 大会 React 大会逛了一圈,没有什么新技术是我不知道的。 厉害。...那时候 JavaScript 还叫做 Livescript,只能运行在网景的浏览器里。那时真是混乱的年代,现在好了,我们有了 JS 的 7 个版本的规范。 7 个版本?...好……吧,什么是 AMD CommonJS? 是两个定义。我们有很多方式来描述 JS 多个库或类的交互方式,比如 exports requires。...那为什么我们直接在页面里添加 React 的三个依赖文件呢? 不行。你可以从 CDN 加载这些文件,但是你还是要在本地用 Babel 转译。 唉,这么鹾?...然后我就能用上 FetchPromise 各种炫酷的东西。 嗯,别忘了加上 Fetch 的 Polyfill,因为 Safari 不支持 Fetch。 你猜怎么着,我们就聊到这吧。

    1.1K30

    webpack 学习笔记系列03-babel

    babel-cli 命令行工具 babelJavaScript 的编译器,可以将最新 ES 语法的代码轻松转换成任意版本的 JavaScript 代码,其实现原理是先使用 Babylon 解释器将...Babel 7 使用了 @babel 命名空间来区分官方包,因此以前的官方包 babel-xxx 改成了 @babel/xxx。...需要在入口文件手动添加 @babel/polyfill,会自动根据 browserslist 替换成浏览器兼容的所有 polyfill import '@babel/polyfill'; entry...其配置可放在 package.json ,也可单独放在配置文件 .browserslistrc 。所有的工具都会主动查找 browserslist 的配置文件,根据配置找出对应的目标浏览器集合。...babel 配置写到 options ,还可以在项目根目录下创建 .babelrc 文件或使用 package.json 的 babel 字段。

    1.7K210

    4. 精读《AsyncAwait 优越之处》

    为什么异步问题如此难处理,Async/Await 又能在多大程度上解决我们开发调试过程遇到的难点呢?希望这篇文章能给我们带来一些启发。...其实在前端领域,也有不少类 Async/Await 的实现,其中不得不提到的就是知名网红之一的老赵写的 wind.js,站在今天的角度看,windjs 的设计实现不可谓超前。...Async/Await 是如何实现的 根据 Async/Await 的规范 的描述 —— 一个 Async 函数总是会返回一个 Promise —— 不难看出 Async/Await Promise...下面是一个最基础的 Async/Await 例子: async function test() { const img = await fetch('tiger.jpg'); } 使用 Babel...('a.json'), fetch('b.json'), fetch('c.json') ); render(...result); } 此外,正如在上文中提到的,async

    31220

    解剖Babel —— 向前端架构师迈出一小步

    Babel是什么 Babel 是一个 JavaScript 编译器。 作为JS编译器,Babel接收输入的JS代码,经过内部处理流程,最终输出修改后的JS代码。 ?...答案是:core-js core-js简介 core-js是一套模块化的JS标准库,包括: 一直到ES2021的polyfill promise、symbols、iterators等一些特性的实现 ES...宿主环境的粒度 当我们按如下参数在项目目录下配置browserslist文件(或在@babel/preset-env的targets属性内设置,或在package.json的browserslist属性设置...比如: a.js: var a = new Promise(); b.js: var b = new Map(); 当宿主环境不支持promise与Map时,输出的文件为: a.js: import...注:这里@babel/core为库名,前文中babel-core为其在仓库对应文件名 中层 @babel/plugin-* Babel对外暴露的API,使开发者可以介入其编译JS的能力 上层 @babel

    1.1K10

    ES2017异步函数现已正式可用

    异步函数或多或少会让你编写一些顺序的 JavaScript 代码,但是却不需要在 callbacks、generators 或 promise 包含你的逻辑。...ES6 标准之前的 JavaScript 异步函数 在深入学习 async await 之前,我们需要先理解 Promise。为了领会 Promise,我们需要回到普通回调函数中进一步学习。...Promise 是在 ES6 引入的,并促使在编写 JavaScript 的异步代码方面,实现了巨大的提升。从此编写回调函数不再那么痛苦。...就在上个月,async 函数成为了 JavaScript 语言的官方特性,并得到了广泛支持。 async await 是建立在 Promise generator上。...为了确保你的代码随时可用,则需要使用 Babel 将你的 JavaScript 代码编译为旧浏览器也支持的语法。 如果对更多ES2017内容感兴趣,请访问ES2017特性的完整列表。

    39810

    ES2017 异步函数现已正式可用

    异步函数或多或少会让你编写一些顺序的 JavaScript 代码,但是却不需要在 callbacks、generators 或 promise 包含你的逻辑。...ES6 标准之前的 JavaScript 异步函数 在深入学习 async await 之前,我们需要先理解 Promise。为了领会 Promise,我们需要回到普通回调函数中进一步学习。...Promise 是在 ES6 引入的,并促使在编写 JavaScript 的异步代码方面,实现了巨大的提升。从此编写回调函数不再那么痛苦。...就在上个月,async 函数成为了 JavaScript 语言的官方特性,并得到了广泛支持。 async await 是建立在 Promise generator上。...为了确保你的代码随时可用,则需要使用 Babel 将你的 JavaScript 代码编译为旧浏览器也支持的语法。

    72840

    最详细、最全面的 Babel 小抄

    Babel 是一个工具链,主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前旧版本的浏览器或其他环境。...在开始品“初恋的味道”前,咱们先做一些准备: 新建一个目录 babel-test 然后创建 package.json 文件: mkdir babel-test && cd babel-test //...小结 通过 去一步一步分析 Babel7 最小最优配置的产生,其中还涉及一些写配置无感知的处理机制,比如 compat-table、browserslist。...@babel/standalone babel-standalone[17] 提供独立构建的 Babel 用于浏览器其他非 Node 环境,比如在线 IDE: JSFiddle[18]、JS Bin[...babel-plugin-proposal-xx:用来编译转换在提案的属性,在 Plugins List[21] 可以看到这些插件,比如 class-properties[22]、decorators

    75610

    数往知来:一次浏览器兼容工作的知识点分析

    在这个机器学习人工智能遍地的年代,前端开发的PC端浏览器兼容问题显得已经不是那么时髦迫切了;刨去某些面向传统行业或网银支付等领域还不得不面对这个具体的问题外,大部分网站移动端应用似乎可以潇洒的回避了...": "^0.8.1", "whatwg-fetch": "^2.0.3" } 显然,这是一个bootstrap样式的后台单页应用,用react实现了组件化、用mobx管理状态、引入了fetch等...promise异步工具,并且使用了一些日期选择富文本编辑器插件等第三方库 --- 感觉上IE就悬乎乎哒ㄟ( ▔, ▔ )ㄏ ?...[endif]--> 姥姥疼:IE6-9发现了HTML条件注释但返回了false 舅舅不爱:IE11两种注释都不认 IE10同时满足两种注释的交集 shim / sham / polyfill 这3个古怪的单词一般都用来描述一些给浏览器打补丁的第三方库...,发现了很多我们已经习以为常的用法背后的原理,以及一些技术的发展脉络,相信在以后的应用,会对相关技术更加心中有数,也能在其他工作,更合理的分析取舍 ?

    1K10

    Babel 配置实验报告

    ,前端浏览器也有多种,每种也有着不同的版本,为了实现这的关系,Babel 也表示非常难,最后的结果就是,随着 Babel 的升级,前端同学有一堆包要学习和了解,如 @babel/cli、@babel..., 下面对 Babel 的配置做了一些实验,本文主要是对于 Babel 的使用,针对工作原理。...一、实验目的 测试 Babel 的不同配置对于 JavaScript 编译结果的影响 二、实验环境要求 依赖包版本 @babel/core 7.7.0 @babel/cli 7.7.0 @babel...= new Promise(); var map = new Map(); 对样本的 const let 以及箭头函数模板字符串语法进行了处理,但对于 padStart 、Promise 、Map...四、实验结果思考 我们通过对 Babel 基本使用的 @babel/preset-env @babel/plugin-transform-runtime 进行配置,测试了不同配置下的实验结果,得出了比较合适的实践

    1.1K30

    【JS】1688- 重学 JavaScript API - Fetch API

    Fetch API 的实际应用 Fetch API 在实际应用具有广泛的用途。下面是一些常见的实际应用场景: 3.1 数据获取展示 通过 Fetch API 可以从服务器获取数据并在页面上展示。...以上仅是 Fetch API 的一些常见应用场景,实际上,它在前端开发的应用非常广泛,涵盖了各种数据交互网络请求的需求。 4....Internet Explorer(IE),Fetch API 在 IE11 及更早版本不受支持。...4.3 工具推荐 以下是基于 Fetch API 封装的一些第三方库: axios[5]: 100k⭐, 一个基于 Promise 的 HTTP 客户端,提供简洁易用的 API。...通过了解 Fetch API 的概念、使用方法实际应用场景,你可以在前端开发更加灵活地处理数据交互、异步数据加载与服务器的通信。 7.

    37630

    前端异步代码解决方案实践(二)

    绝大多数 JavaScript/DOM平台新增的异步API( Fetch、 Serviceworker)也都是基于 Promise构建的。...比如在 Promise 的创建过程( fn执行时)出现异常,那这个异常会被捕捉并调用 onRejected。...在 JavaScript 语言中,Thunk 函数指的是将参数函数替换为一个只接受回调函数作为参数的单参数函数(注:这里参数函数指的是类似 node 异步 api 风格,callback 为最后入参...以 node 异步读取文件为例: // 正常版本的 readFile(参数) fs.readFile(fileName, callback) // Thunk 版本的 readFile (单参数)...可迭代协议和迭代器协议 前面说到迭代器,再顺便解释下 可迭代协议 迭代器协议。 可迭代协议允许 JavaScript 对象去定义它们的迭代行为, 例如在 for...of 结构什么值可以循环。

    3.3K60

    Promise 向左,AsyncAwait 向右?

    ,这其中 Promise Async/Await 依然活跃代码,对他们的认识评价也经历多次反转,也有各自的拥趸,形成了一直延续至今的爱恨情仇,其背后的思考启发,依旧值得我们深思。...其实在前端领域,也有不少类 Async/Await 的实现,其中不得不提到的就是知名网红之一的老赵写的 wind.js,站在今天的角度看,windjs 的设计实现不可谓超前。 3.1....前文有一个 Generator 函数,依次读取两个文件。...来看下实际 Babel 转化的代码,方便大家理解下 async function test() { const img = await fetch('tiger.jpg'); } // babel...从 Promise Async/Await 的演进纠结,大家实际能够感到前端人对 JavaScript 世界的辛苦耕作和奇思妙想,这种思维和方式也可以沉淀到我们日常的需求开发中去,善于求索,辩证的去使用它们

    49120

    webpack es6转es5_nodejs支持es6吗

    万恶的IE遗臭万年仍然需要坑 ie标准对html/css甚至js的规范简直相差甚远,所以,一般要解决的兼容问题很大一部分是为了解决ie的兼容,虽然目前流行的ES6语法及规范将IE的考虑抛弃掉,默认放弃对...这里我们先做一个修改,用导入的办法把ES6代码挪到打包的js代码文件: 原index.js: console.log("webpack 1"); let fun = () => {...babel-loader 8.x | babel 7.x 最新版本 npm install -D babel-loader @babel/core @babel/preset-env #webpack...4.x | babel-loader 7.x | babel 6.x 版本 npm install -D babel-loader@7 babel-core babel-preset-env webpack...我这里使用的是7.x版本: 创建babel工具的配置文件:.babelrc { "presets": [ "es2015" ], "plugins

    45810
    领券