1.为什么要用babel-polyfill

Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。举个栗子,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。

2.安装

npm install babel-polyfill -S

因为是一个 polyfill (它需要在你的源代码之前运行),我们需要让它成为一个 dependency,而不是一个 devDependency

3.在 Node / Browserify / Webpack 中使用

你需要在你的应用入口顶部通过 require 将 polyfill 引入进来。确保它在任何其他代码/依赖声明之前被调用!

require("babel-polyfill");

如果你在你的应用入口使用 ES6 的 import 语法,你需要在入口顶部通过 import 将 polyfill 引入,以确保它能够最先加载:

import 'babel-polyfill';

在 webpack.config.js 中,将 babel-polyfill 加到你的 entry 数组中:

module.exports = {
entry: ["babel-polyfill", "./app/js"]
};

4.在浏览器中使用

可以在 babel-polyfill npm 发布版中的 dist/polyfill.js 文件中找到它。 它需要在你编译过的 Babel 代码之前被包括进去。你可以将它追加到你编译过的代码中,或者在这些代码之前通过 <script> 引入它。

注意: 不要通过类似 browserify 等手段来 require 它,用 babel-polyfill

5.备注

Babel默认不转码的API非常多,详细清单可以查看 babel-plugin-transform-runtime模块的 definitions.js

参考:https://www.babeljs.cn/docs/usage/polyfill/

为什么要用babel-polyfill的更多相关文章

  1. emitted value instead of an instance of error the scope attribute for scoped slots webpack babel polyfill

    api20180803.vue emitted value instead of an instance of error the scope attribute for scoped slots h ...

  2. 深入浅出ES6(九):学习Babel和Broccoli,马上就用ES6

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 现在,我们将向你分步展示如何做到的这一切.上面提及的工具被称为转译器,你可以将它 ...

  3. 深入浅出 ES6:ES6 与 Babel / Broccoli 的联用

    深入浅出 ES6指的是添加在 ECMASript 标准第六版中的 JavaScript 编程语言的新特性,简称为 ES6. 虽然 ES6 刚刚到来,但是人们已经开始谈论 ES7 了,它未来的样子,以及 ...

  4. 《前端之路》之 Babel 下一代 JavaScript 语法编译器

    写本章的内容的出发点主要是 为了对于之前关于 JS 版本的一个总结,在之前的开发中,我们始终对于 ECMAScript 的版本的更新不够重视,以至于在后面的 开发过程中,我们始终会被各种新奇的语法打断 ...

  5. babel7-按需加载polyfill

    babel7 babel7发布了. 在升级到 Babel 7 时需要注意几个重大变化: 移除对 Node.js 6 之前版本的支持: 使用带有作用域的 @babel 命名空间,以防止与官方 Babel ...

  6. webpack4与babel配合使es6代码可运行于低版本浏览器

    使用es6+新语法编写代码,可是不能运行于低版本浏览器,需要将语法转换成es5的.那就借助babel7转换,再加上webpack打包,实现代码的转换. 转换包括两部分:语法和API let.const ...

  7. 关于babel官网的学习

    提起babel,前端er大概都不陌生.但是为什么要有babel呢?解决了什么问题?怎么使用babel呢?注意点在哪?以下就从这几个方面总结一下我关于babel学习的结果吧. 为什么要有babel呢? ...

  8. babel (三) babel polly-fill

    Babel includes a polyfill that includes a custom regenerator runtime and core-js. This will emulate ...

  9. babel (二) update to v7

    一.rootmode In 7.1, we've introduced a rootMode option for further lookup if necessary. 二.Remove prop ...

  10. babel(一)

    一.babel npm babel src/index.js -d lib 二.@babel/core   @babel/cli @babel/core  转换语法核心 @babel/cli   执行 ...

随机推荐

  1. 洛谷 3275 [SCOI2011]糖果

    题目戳这里 N句话题意 有N个人,k个限制,有五种限制 如果X=1, 表示第A个小朋友的糖果必须和第B个小朋友的糖果一样多: 如果X=2, 表示第A个小朋友的糖果必须少于第B个小朋友的糖果: 如果X= ...

  2. Java中Iterator的fast-fail分析

    1.fail-fast简介 fail-fast机制是java集合(Collection)中的一个错误机制.当多个线程对同一个集合的内容进行操作时,就可能会产生fail-fast事件. 例如:当某一个线 ...

  3. <ReversingEngineering>关于windows32位系统下的dll注入技术经验汇

    上个学期把自己闷在图书馆一直在看关于逆向工程技术方面的书,从入门到初级,现在也敢说自己一条腿已经迈进了这片知识的大门里,因为该博客刚开通先将一些经验记录下来,也是留给自己一方面做个参照. <逆向 ...

  4. SDUT OJ 1479 数据结构实验之栈:行编辑器

    数据结构实验之栈:行编辑器 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述  一个简单的行编辑程序的功能是:接受用户从终端输入的程 ...

  5. Spring Boot2.0之多数据源分布式事务问题

    分布式事务解决方案的问题, 分布式事务产生的原因: 多个不同的服务连接不同的数据源 ,做分布式事务的管理. 这种情况是连接两个数据源的情况,然后事务管理器是这样的 只管理了test02的这端业务代码. ...

  6. zabbix api支持的数据类型

    bool flag integer float string timestamp array object query countOutput editable excludeSearch filte ...

  7. Linux-Yum服务器搭建

    Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的服务器自动下载 ...

  8. ctypes模块与pywin32模块

    ctypes模块: 主要用于调用c动态链接库. 1.聊聊Python ctypes模块 2.ctypes模块管理 相关网址: pywin32模块: 用于访问win32API函数(win32api模块) ...

  9. hdu-5857 Median(水题)

    题目链接: Median Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  10. visual studio code使用MSVC编译C++

    环境 OS::Microsoft Windows [Version 10.0.17134.285] x64 VSC:Version:1.27.2 (system setup) VS:2017 心血来潮 ...