babel-polyfill 使用场景

Babel 默认只转换新的 JavaScript 语法,而不转换新的 API。例如,Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转译。如果想使用这些新的对象和方法,必须使用 babel-polyfill,为当前环境提供一个垫片。

babel-runtime 使用场景

Babel 转译后的代码要实现源代码同样的功能需要借助一些帮助函数,例如,{ [name]: 'JavaScript' } 转译后的代码如下所示:

'use strict';
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
var obj = _defineProperty({}, 'name', 'JavaScript');

类似上面的帮助函数 _defineProperty 可能会重复出现在一些模块里,导致编译后的代码体积变大。Babel 为了解决这个问题,提供了单独的包 babel-runtime 供编译模块复用工具函数。

启用插件 babel-plugin-transform-runtime 后,Babel 就会使用 babel-runtime 下的工具函数,转译代码如下:

'use strict';
// 之前的 _defineProperty 函数已经作为公共模块 `babel-runtime/helpers/defineProperty` 使用
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var obj = (0, _defineProperty3.default)({}, 'name', 'JavaScript');

除此之外,babel 还为源代码的非实例方法(Object.assign,实例方法是类似这样的 "foobar".includes("foo"))和 babel-runtime/helps 下的工具函数自动引用了 polyfill。这样可以避免污染全局命名空间,非常适合于 JavaScript 库和工具包的实现。例如 const obj = {}, Object.assign(obj, { age: 30 }); 转译后的代码如下所示:

'use strict';
// 使用了 core-js 提供的 assign
var _assign = require('babel-runtime/core-js/object/assign');
var _assign2 = _interopRequireDefault(_assign);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var obj = {};
(0, _assign2.default)(obj, {
age: 30
});

思考:babel-runtime 为什么适合 JavaScript 库和工具包的实现?

  1. 避免 babel 编译的工具函数在每个模块里重复出现,减小库和工具包的体积;

  2. 在没有使用 babel-runtime 之前,库和工具包一般不会直接引入 polyfill。否则像 Promise 这样的全局对象会污染全局命名空间,这就要求库的使用者自己提供 polyfill。这些 polyfill 一般在库和工具的使用说明中会提到,比如很多库都会有要求提供 es5 的 polyfill。在使用 babel-runtime 后,库和工具只要在 package.json 中增加依赖 babel-runtime,交给 babel-runtime 去引入 polyfill 就行了;

总结:

  1. 具体项目还是需要使用 babel-polyfill,只使用 babel-runtime 的话,实例方法不能正常工作(例如 "foobar".includes("foo"));

  2. JavaScript 库和工具可以使用 babel-runtime,在实际项目中使用这些库和工具,需要该项目本身提供 polyfill;

转义BABEL的POLYFILL和RUNTIME的区别的更多相关文章

  1. Babel与Polyfill的关系和区别

    很多同学搞不清楚babel与polyfill的关系以及区别,这儿给大家细致解惑. Babel:Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码.注意:Babel 默 ...

  2. babel和polyfill?

    Babel: Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码.注意:Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ...

  3. Vugen 和controller 中的run-time setting区别

    Vugen 和controller 中的run-time setting有什么不同?

  4. error/exception/runtime exception区别

    (1)java中的异常是什么? 异常指的是程序运行过程中出现的非正常情况或错误,当程序违反了语义规则时,jvm就会将出现的错误表示为一个异常抛出.在java中,一切皆对象,异常也是,它被当作一个对象, ...

  5. webpack+babel项目在IE下报Promise未定义错误引出的思考

    低版本浏览器引起的问题 最近开发一个基于webpack+babel+react的项目,一般本地是在chrome浏览上面开发,chrome浏览器开发因为支持大部分新的js特性,所以一般不怎么需要poly ...

  6. 搭建vue环境

    1. 下载安装nodejs 截至2018-06-05 最新稳定版本为 8.11.2,直接 next ,不改目录. PS C:\Users\Administrator> node -v v8.11 ...

  7. bable

    Babel是一个javascrpt编译器,能将es6转换为es5代码.并且通过插件的形式可以灵活的扩展. 从根目录读取.babelrc文件中读取配置..babelrc是一个json文件 配置 plug ...

  8. babel-loader的原理

    本文转载自默语的博客. Babel包的构成 核心包 babel-core:是babel转译器本身,提供转译的API,例如babel.transform等,webpack的babel-loader就是调 ...

  9. Babel学习小记

    一.babel配置文件中的plugins和presets是什么? 1.首先说说babel是什么,babel是一个JavaScript转码器,帮助我们把浏览器不兼容的ES6语法转换成ES5语法: 2.接 ...

随机推荐

  1. vs code 同步

    vs code 同步需要在github上配置好gist id, 将gist id添加至setting.json中, 然后再在localsetting中设置access token,  gist id ...

  2. C# 给DataTable去重

    using System; using System.Data; namespace DelegateTest { public class Program { public static void ...

  3. tac 反向显示文件内容

    1.命令功能 tac是cat的反向拼写,功能是反向显示文件内容. 2.语法格式 tac  option  file 3.使用范例 [root@localhost chu]# cat test.txt ...

  4. PHP Session 序列化及反序列化处理器设置使用不当带来的安全隐患(转)

    PHP Session 序列化及反序列化处理器设置使用不当带来的安全隐患 时间 2014-11-14 15:05:49  WooYun知识库 原文  http://drops.wooyun.org/t ...

  5. 运行 tensorboard

    使用下面命令总是报错: tensorboard --logdir=mylogdir tensorboard --logdir='./mylogdir' 正确命令 tensorboard --logdi ...

  6. centos上部署flask项目之环境配置-MySQL的安装

    1.添加mysql 的yum源 wget 'https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm'    rpm ...

  7. 20 简述BASE64编码的作用和c#对其的支持?

  8. 英语单词Obsolete

    Obsolete 来源——命令帮助 [root@centos73 ~]# help typeset typeset: typeset [-aAfFgilrtux] [-p] name[=value] ...

  9. B/S上传整个文件夹

    在web项目中上传文件夹现在已经成为了一个主流的需求.在OA,或者企业ERP系统中都有类似的需求.上传文件夹并且保留层级结构能够对用户行成很好的引导,用户使用起来也更方便.能够提供更高级的应用支撑. ...

  10. Java项目案例之---加法计算器(转发和重定向)

    加法计算器(转发和重定向) 运行显示: 转发 重定向 代码: index.jsp <%-- Created by IntelliJ IDEA. User: Administrator Date: ...