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. php总结2——php中的变量、数据类型及转换、运算符、流程控制中的分支结构

    2.1  php中的变量: 定义变量:$变量名称=值: 变量名称:$开头    $之后的第一位必须是字母    $第二位之后可以是字母.数字或者是下划线.习惯上变量名称有实际含义,第二个单词后首字母大 ...

  2. Django框架ORM单表添加表记录_模型层

    此方法依赖的表时之前创建的过的一张表 参考链接:https://www.cnblogs.com/apollo1616/p/9840354.html 方法1: # 语法 [变量] = [表名].obje ...

  3. flex做页面。用来做视频的后台服务器是fms

    作为新一代的富客户端互联网技术的佼佼者,Flex这种技术已经被越来越多的公司所采用,被越来越多的用户和程序员所接受.以下列出Flex十大优势: 1.Flex与Flash:可以让普通程序员开发制作Fla ...

  4. 服务器安装tensorflow导入模块报错Illegal instruction (core dumped)

    在ubuntu上安装tensorflow后导入模块显示Illegal instruction (core dumped) 服务器的版本是Ubuntu 16.04.5 降低版本,成功导入模块 pip3 ...

  5. 在pycharm中执行脚本没有报错但输出显示Redirection is not supported.

    没有新式语法错误,但是输出显示Redirection is not supported.(不支持重定向) 在stockflow中找到是因为从IDE中运行脚本的原因,比如pycharm,所有IDE都提供 ...

  6. 20145239杜文超 《Java程序设计》实验二 Java面向对象程序设计实验报告

    20145239 <Java程序设计>实验二 Java面向对象程序设计实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S. ...

  7. 51Nod 1376 最长递增子序列的数量 —— LIS、线段树

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1376 1376 最长递增子序列的数量 基准时间限制:1 秒 空 ...

  8. matlab保存txt文件

    save roadsurfacepointcloud.xyz -ascii roaddata2 %保存路面点云文件 roaddata2是变量.

  9. 分享知识-快乐自己:SpringBoot结合使用拦截器(判断是否用户是否已登陆)

    所有的开发之中拦截器一定是一个必须要使用的功能,利用拦截器可以更加有效的实现数据的验证处理,而且最为幸运的是在SpringBoot之中所使用的拦截器与Spring中的拦截器完全一样. 基础拦截器操作: ...

  10. java 基础 - 查找某个字串出现的次数及位置

    查找某个字串出现的次数及位置 public class search { public static void main(String[] args){ String str = "abc1 ...