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;

疑问:像 [email protected] 这样的库使用了 babel-runtime,在实际项目中使用 [email protected],我们需要引入 babel-polyfill。但全部 polyfill 打包压缩下来也有 80kb 左右,其中很多 polyfill 是没有用到的,如何减少体积呢?手工一个个引入使用到的 polyfill,似乎维护成本太高!

时间: 2024-11-13 06:58:00

babel-runtime 使用场景的相关文章

./node_modules/history/esm/history.js Module not found: Can't resolve '@babel/runtime/helpers/esm/extends'

从同事手中接手项目之后.npm install 然后npm start的时候.开始报上图的错误.解决方法一(比较 愚蠢)当时找到的解决方法都没有用.然后只能按照报错的路径,从同事那边复制了node_modules下面的文件(报错路径文件替换掉),ran然后在npm start的时候,项目可以正常运行.(下图为当时替换掉的文件) 解决方法二  替换roadhog的版本为   "roadhog": "^2.5.0-beta.4", 然后删掉node_modules文件夹

Runtime使用场景

前言 本篇主要介绍Runtime在开发中的一些使用场景,顺便讲解了下MJExtension的底层实现.如果喜欢我的文章,可以关注我微博:吖了个峥,也可以来小码哥,了解下我们的iOS培训课程.后续还会更新更多内容... 一.runtime简介 RunTime简称运行时.OC就是运行时机制,也就是在运行时候的一些机制,其中最主要的是消息机制. 对于C语言,函数的调用在编译的时候会决定调用哪个函数. 对于OC的函数,属于动态调用过程,在编译的时候并不能决定真正调用哪个函数,只有在真正运行的时候才会根据

iOS 运行时RunTime使用场景一:打点统计用户行为,深度解耦

转自:http://www.jianshu.com/p/0497afdad36d 用户统计.jpeg 用户行为统计(User Behavior Statistics, UBS)一直是移动互联网产品中必不可少的环节,也俗称埋点.在保证移动端流量不会受较大影响的前提下,PM们总是希望埋点覆盖面越广越好.目前常规的做法是将埋点代码封装成工具类,但凡工程中需要埋点(如点击事件.页面跳转)的地方都插入埋点代码.一旦项目越来越复杂,你会发现埋点的代码散落在程序的各个角落,不利于维护以及复用.本文旨在探讨利用

关于 iOS RunTime 使用的一些场景

1.RunTime 简介: RunTime 在 OC 中的工作:OC 语言的设计模式决定了尽可能的把程序从编译和链接时推迟到运行时.只要有可能,OC 总是使用动态的方式来解决问题.这意味着 OC 语言不仅需要一个编译器,同时也需要一个运行时系统来执行编译好的代码.这儿的运行时系统扮演的角色类似于 OC 语言的操作系统,OC 基于该系统来工作. 2.RunTime 常用场景: 1.动给属性赋值: 例如我先创建一个 Student 对象,里面定义两个属性:name.age 下面看截图 这个时候运行打

@babel/preset-env 与@babel/plugin-transform-runtime 使用及场景区别

之前在用babel 的时候有个地方一直挺晕的,`@babel/preset-env` 和 `@babel/plugin-transform-runtime`都具有转换语法的能力, 并且都能实现按需 `polyfill` ,但是网上又找不到比较明确的答案, 趁这次尝试 roullp 的时候试了试. 如果我们什么都不做, 没有为babel 编写参数及配置, 那babel 并没有那么大的威力, 它什么都不会做, 正是因为各个预设插件的灵活组合.赋能, 让 babel 充满魅力, 创造奇迹 首先是 @b

iOS runtime探究(一): 从runtime开始理解面向对象的类到面向过程的结构体

你要知道的runtime都在这里 转载请注明出处 http://blog.csdn.net/u014205968/article/details/67639205 本文主要讲解runtime相关知识,从原理到实践,由于包含内容过多分为以下五篇文章详细讲解,可自行选择需要了解的方向: 从runtime开始: 理解面向对象的类到面向过程的结构体 从runtime开始: 深入理解OC消息转发机制 从runtime开始: 理解OC的属性property 从runtime开始: 实践Category添加属

Runtime相关整理

一.Runtime是用C和汇编写的 对于C语言,函数的调用在编译的时候会决定调用哪个函数.对于OC的函数,属于动态调用过程,在编译的时候并不能决定真正调用哪个函数,只有在真正运行的时候才会根据函数的名称找到对应的函数来调用. 二.Runtime常用头文件 #import<objc/runtime.h> #import<objc/message.h> 三.Runtime常用函数  class_copyIvarList:获得某个类内部的素有成员变量 class_copyMethodLi

iOS 模块分解—「Runtime面试、工作」看我就 &#128018; 了 ^_^.

引导 相信对于从事开发人员来说 runtime 这个名称都不陌生,就像我起初只知道「 runtime 叫运行时 」,后来知道 runtime 同样可以像 KVC 一样访问私有成员变量,还有「 给类动态添加属性:LNTextField.placeholderColor || 交换方法:imageNamed => ln_imageNamed 」,还有深入的 「 消息机制的调用流程 || 字典转模型 || 实现NSCoding归解档 」以及我们常说的"黑魔法" 是什么? runtime

babel 7.x 和 webpack 4.x 配置vue项目

很偶然的今天想开个自己的小项目,记录一下最近项目工程上实现的一个小交互.按照之前运行非常流畅的配置走一遍,打包遇到各种坑.只好根据命令行的报错逐个排查,发现babel升级了一个大版本,已经到7.x了.看来每日沉迷项目,已经跟不上节奏了.这里记录一下遇到的问题以及解决方案. 1.webpack 4.x 插件 extract-text-webpack-plugin (node:2628) DeprecationWarning: Tapable.plugin is deprecated. Use ne

webpack4 使用babel处理ES6语法的一些简单配置

一,安装包 npm install --save-dev babel-loader @babel/corenpm install @babel/preset-env --save-devnpm install --save @babel/polyfillnpm install --save-dev @babel/plugin-transform-runtimenpm install --save @babel/runtime npm install @babel/runtime-corejs2