引言

babel默认只转换新的 JavaScript 语法,比如箭头函数、扩展运算(spread)。

不转换新的 API,例如IteratorGeneratorSetMapsProxyReflectSymbolPromise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转译。如果想使用这些新的对象和方法,则需要为当前环境提供一个垫片(polyfill)。

此篇仅对三种polyfill进行介绍,并讲了他们的安装配置。具体的每种对新语法的转换结果,可以看参考链接的第一个。

三种polyfill介绍

babel-polyfill

目前最常用的配合Babel一起使用的polyfill是babel-polyfill,通过改写全局prototype的方式实现,它会加载整个polyfill,针对编译的代码中新的API进行处理,并且在代码中插入一些帮助函数,比较适合单独运行的项目。

babel-polyfill解决了Babel不转换新API的问题,但是直接在代码中插入帮助函数,会导致污染了全局环境,并且不同的代码文件中包含重复的代码,导致编译后的代码体积变大。虽然这对于应用程序或命令行工具来说可能是好事,但如果你的代码打算发布为供其他人使用的库,或你无法完全控制代码运行的环境,则会成为问题。

babel-runtime

Babel为了解决上述问题,提供了单独的包babel-runtime用以提供编译模块的工具函数,启用插件babel-plugin-transform-runtime后,Babel就会使用babel-runtime下的工具函数。

babel-runtime插件能够将这些工具函数的代码转换成require语句,指向为对babel-runtime的引用。每当要转译一个api时都要手动加上require('babel-runtime')。简单说 babel-runtime 更像是一种按需加载的实现,比如你哪里需要使用 Promise,只要在这个文件头部 require Promise from 'babel-runtime/core-js/promise' 就行了

不过如果你许多文件都要使用 Promise,难道每个文件都要 import 一遍不成?

babel-plugin-transform-runtime

为了方便使用 babel-runtime,解决手动 require 的苦恼。它会分析我们的 ast 中,是否有引用 babel-rumtime 中的垫片(通过映射关系),如果有,就会在当前模块顶部插入我们需要的垫片。

transform-runtime 是利用 plugin 自动识别并替换代码中的新特性,你不需要再引入,只需要装好 babel-runtime 和 配好 plugin 就可以了。

好处是按需替换,检测到你需要哪个,就引入哪个 polyfill,如果只用了一部分,打包完的文件体积对比 babel-polyfill 会小很多。而且 transform-runtime 不会污染原生的对象,方法,也不会对其他 polyfill 产生影响。

所以 transform-runtime 的方式更适合开发工具包,库,一方面是体积够小,另一方面是用户(开发者)不会因为引用了我们的工具,包而污染了全局的原生方法,产生副作用,还是应该留给用户自己去选择。

⭐比较

babel-polyfill与babel-runtime相比虽然有各种缺点,但在某些情况下仍然不能被babel-runtime替代, 例如,

[1, 2, 3].includes(3)Object.assign({}, {key: 'value'})ArrayObject以及其他”实例”下es6的方法,babel-runtime是无法支持的, 因为babel-runtime只支持到 static 的方法。

安装配置

babel-polyfill

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

npm install --save babel-polyfill

直接在代码中require,或者在webpack的entry中添加,也可以在babel的env中设置useBuildins为true来开启。

//示例:vue-cli脚手架中使用
import 'babel-polyfill'
//示例:webpack的entry中添加
entry: {
    common: [
        `babel-polyfill`,
        `whatwg-fetch`,
        `react`,
        `react-dom`,
        `redux`,
        `react-redux`,
        `js-cookie`,
    ],
},

babel-runtime 和 babel-plugin-transform-runtime

在大多数情况下,你应该安装 babel-plugin-transform-runtime 作为开发依赖(使用 --save-dev),并且将 babel-runtime 作为生产依赖(使用 --save)。这个看vue-cli生成的 package.json就能发现。

因为babel编译es6到es5的过程中,babel-plugin-transform-runtime这个插件会自动polyfill es5不支持的特性,这些polyfill包就是在babel-runtime这个包里(core-js 、regenerator等)

npm install --save-dev babel-plugin-transform-runtime

npm install --save babel-runtime

用法

通过 .babelrc(推荐)

将以下内容添加到你的 .babelrc 文件中:

未包含选项:

{
  "plugins": ["transform-runtime"]
}

包含选项:

{
  "plugins": [
    ["transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": true,
      "moduleName": "babel-runtime"
    }]
  ]
}

选项

1.辅助(helpers)

默认值是:true

表示是否开启内联的babel helpers(即babel或者环境本来的存在的垫片或者某些对象方法函数)(clasCallCheck,extends,etc)在调用模块名字(moduleName)时将被替换名字。

2.垫片/polyfill

默认值是:`true'

表示是否把内置的东西(Promise,Set,Map,tec)转换成非全局污染垫片。

3.重新生成/regenerator

默认值是:true

是否开启generator函数转换成使用regenerator runtime来避免污染全局域。

4.模块名字/moduleName

默认值:babel-runtime

当调用辅助(内置垫片)设置模块(module)名字/路径.

例子:

{
  "moduleName": "flavortown/runtime"
}
import extends from 'flavortown/runtime/helpers/extends';

优点

  • 不会污染全局变量

  • 多次使用只会打包一次

  • 依赖统一按需引入,无重复引入,无多余引入

缺点

  • 不支持实例化的方法,例Array.includes(x) 就不能转化

  • 如果使用的API用的次数不是很多,那么transform-runtime 引入polyfill的包会比不是transform-runtime 时大

  • 随着应用的增大,相同的 polyfill 每个模块都要做重复的工作(检测,替换),虽然 polyfill 只是引用,编译效率不够高效。

参考链接

Babel用法 | usages transform-runtime

小毛蛋_对babel-transform-runtime,babel-polyfill的一些理解

zackxizi babel-runtime和babel-polyfill的作用介绍和使用

babel-polyfill、babel-runtime 的选择

vue - Babel之babel-polyfill、babel-runtime、transform-runtime的更多相关文章

  1. @babel/preset-env使用polyfill遇到的坑

    场景还原 最近将一个项目由babel@6升级到babel@7,升级后最重要的两个包: @babel/preset-env: 提供代码的转换和API的polyfill的能力 @babel/plugin- ...

  2. Microsoft Visual C++ Runtime Library Runtime Error的解决的方法

    打开浏览器时,出现Microsoft Visual C++ Runtime Library Runtime Error错误,初步预计是软件冲突,可能有多种出错的方式,我的是浏览器自己主动关闭. 一. ...

  3. Microsoft Visual C++ Runtime Library Runtime Error解决的方式

    打开浏览器时,出现Microsoft Visual C++ Runtime Library Runtime Error错误,初步预计是软件冲突,可能有多种出错的方式,我的是浏览器自己主动关闭. 一. ...

  4. [VUE]报错: No Babel config file detected for

    在使用vue脚手架创建的项目中,项目中每个文件的第一行都会有红色波浪线. 解决方法:在项目文件中找到package.json文件,在parserOptions里添加"requireConfi ...

  5. Babel 处理 webpack 无法处理的 ES 语法(Babel 6.x 和 Babel 7.x 有区别)(二)

    //这是main.js是我们项目的js入口文件 //1:a导入jQuery,引入jQuery包用$变量接收,此方法与node中 const $ = require('jquery') 同 //此为ES ...

  6. babel的使用及babel与gulp结合工作流

    Babel 通过语法转换器支持最新版本的 JavaScript . 它有非常多的插件,这些插件能够允许我们立刻使用新语法,无需等待浏览器支持. 那我们怎么使用babel呢? 首先我们来了解babel基 ...

  7. webpack 安装vue(两种代码模式compiler 和runtime)

    使用webpack安装vue,import之后,运营项目报错,如下: [Vue warn]: You are using the runtime-only build of Vue where the ...

  8. Vue 项目添加 promise polyfill

    1. 安装依赖 npm install es6-promise --save 2. 在 main.js 上面引入: import 'es6-promise/auto'

  9. [AST Babel Plugin] Transform code, add line:column number for console log

    For example we have current code: function add(a, b) { console.log(a, b) return a + b } function sub ...

  10. @babel/runtime 和 @babel/plugin-transform-runtime 两个的作用是什么

    Babel 最基础的功能就是将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中. 最基础的依赖包也就是 ...

随机推荐

  1. vuejs 踩坑及经验总结

    问题描述 在使用 v-for repeat 组件时控制台会出现警告: 解决方法 在组件标签上使用 v-for : 加 :key 使用 template 标签包裹该组件,再在 template 标签 上 ...

  2. objectarx 得到有宽度的多段的轮廓

    使用到的命令是:_.wmfout和_.import以及PEdit步骤:1.先通过_.wmfout和_.import得到轮廓线,得到的轮廓线是一个块.方法如下: //ssname:选择的有宽度的多段线 ...

  3. mysql JOIN查询

    查询左表a,并且关联a表在b表中的关联,如果关联不存在也可以查出左表的,注:只查询a的部分列,和b的部分列 SELECT a.id, b.id as my FROM a LEFT JOIN b ON ...

  4. 攻防世界Mobile6 app1 XCTF详解

    XCTF_app1 先安装看看 点击芝麻开门之后会弹出“年轻人不要耍小聪明噢” 这大概就能看懂是点击之后进行判断,那就直接去看JEB,看看判断条件是什么 V1是输入的字符串,V2获取包信息(百度的), ...

  5. cordova+vue打包ios调用相机闪退解决

    cordova+vue项目打包android,打开相机正常使用,但是打包ios后,需要多几个配置,才能打开,否则当调用的时候会闪退,上配置图 需要在选中的文件里面添加 <key>NSCam ...

  6. Markdown语法说明及常用软件推荐(附链接)

    Markdown语法同样支持HTML标签 以下所有字符均为英文字符 标题 标题级别由#决定,一个为一级 样例 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ...

  7. AlphaGo、人工智能、深度学习解读以及应用

    经过比拼,AlphaGo最终还是胜出,创造了人机大战历史上的一个新的里程碑.几乎所有的人都在谈论这件事情,这使得把“人工智能”.“深度学习”的热潮推向了新的一个高潮.AlphaGo就像科幻电影里具有人 ...

  8. idea新建springboot项目

    不多说废话,直接进入正题,按照下面的步骤创建一个springboot项目一般不会出错,当然不排除可能会有一些脸黑的,不过应该问题不大. 第一步,如果你是在已有的项目里面,新建一个springboot项 ...

  9. 一套代码同时支持.NET Framework和.NET Core

    转自:https://www.cnblogs.com/tianqing/p/11614303.html 在.NET Core的迁移过程中,我们将原有的.NET Framework代码迁移到.NET C ...

  10. MySQL记录操作(增删改)

    概览 MySQL数据操作: DML 在MySQL管理软件中,可以通过SQL语句中的DML语言来实现数据的操作,包括 使用INSERT实现数据的插入 UPDATE实现数据的更新 使用DELETE实现数据 ...