一 概述

每个Babel编译后的脚本文件,都以导入的方式使用Babel的帮助函数,而不是每个文件都复制一份帮助函数的代码。

1 优点

(1)提高代码重用性,缩小编译后的代码体积。

(2)防止污染全局作用域。(启用corejs配置)

babel-polyfill会将Promise等添加成全局变量,污染全局空间。

① 默认使用@babel/runtime,corejs配置为2时,改为使用@babel/runtime-corejs2。

② 几个包的包含关系。

babel-polyfill仅仅是引用core-js、regenerator-runtime这两个npm包。

@babel/runtime包含两个文件夹:helpers(定义了一些处理新的语法关键字的帮助函数)、regenerator(仅仅是引用regenerator-runtime这个npm包)。

@babel/runtime-corejs2包含三个文件夹:core-js(引用core-js这个npm包)、helpers(定义了一些处理新的语法关键字的帮助函数)、regenerator(仅仅是引用regenerator-runtime这个npm包)。

可以看出,@babel/runtime-corejs2≈@babel/runtime + babel-polyfill:

@babel/runtime只能处理语法关键字,而@babel/runtime-corejs2还能处理新的全局变量(例如,Promise)、新的原生方法(例如,String.padStart );

使用了@babel/runtime-corejs2,就无需再使用@babel/runtime了。

二 项目结构

三 搭建环境

# 安装gulp
yarn add --dev gulp
# 安装Babel
yarn add --dev gulp-babel@next
yarn add --dev gulp-babel@next @babel/core
# 安装preset
yarn add --dev @babel/preset-env
# 安装pugin
yarn add --dev @babel/plugin-transform-runtime

四 创建配置文件

(1)gulpfile.js

 

var gulp = require("gulp");
var babel = require("gulp-babel"); gulp.task("default", function () {
return gulp.src("src/**/*.js")
.pipe(babel())
.pipe(gulp.dest("dist"));
});

(2).babelrc

{
"presets": ["@babel/preset-env"],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}

五 创建脚本文件

(1)apple.js

  

class Apple{
constructor(){
this.name = Symbol('apple');
this.attrs = new Map();
} hello(){
console.log('hello');
}
}

(2)orange.js

class Apple{
constructor(){
this.name = Symbol('orange');
this.attrs = new Map();
} hello(){
console.log('hello');
}
}

六 编译后文件

(1)apple.js

"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");

var _map = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/map"));

var _symbol = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/symbol"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/createClass"));

var Apple =
/*#__PURE__*/
function () {
function Apple() {
(0, _classCallCheck2.default)(this, Apple);
this.name = (0, _symbol.default)('apple');
this.attrs = new _map.default();
} (0, _createClass2.default)(Apple, [{
key: "hello",
value: function hello() {
console.log('hello');
}
}]);
return Apple;
}();

(2)orange.js

"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");

var _map = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/map")); 

var _symbol = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/symbol"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/createClass"));

var Apple =
/*#__PURE__*/
function () {
function Apple() {
(0, _classCallCheck2.default)(this, Apple);
this.name = (0, _symbol.default)('orange');
this.attrs = new _map.default();
} (0, _createClass2.default)(Apple, [{
key: "hello",
value: function hello() {
console.log('hello');
}
}]);
return Apple;
}();

Babel插件:@babel/plugin-transform-runtime的更多相关文章

  1. [转] 以 async/await 为例,说明 babel 插件怎么搭

    你一定碰到过这些库 babel-polyfill 项目地址:https://github.com/babel/babel/blob/master/packages/babel-polyfill 通过两 ...

  2. 从AST编译解析谈到写babel插件

    之前一直在掘金上看到一些关于面试写babel插件的文章,最近也在学,以下就是学习后的总结. 关键词:AST编译解析, babel AST编译解析 AST[维基百科]:在计算机科学中,抽象语法树(Abs ...

  3. 开发一个简单的babel插件

    前言 对于前端开发而言,babel肯定是再熟悉不过了,工作中肯定会用到.除了用作转换es6和jsx的工具之外,个人感觉babel基于抽象语法树的插件机制,给我们提供了更多的可能.关于babel相关概念 ...

  4. 【babel+小程序】记“编写babel插件”与“通过语法解析替换小程序路由表”的经历

    话不多说先上图,简要说明一下干了些什么事.图可能太模糊,可以点svg看看 背景 最近公司开展了小程序的业务,派我去负责这一块的业务,其中需要处理的一个问题是接入我们web开发的传统架构--模块化开发. ...

  5. 使用babel插件集

    1).打开配置文件".babelrc",配置插件集,代码如下: { "presets":["latest"] } 2).安装babel插件集 ...

  6. 快速写一个babel插件

    es6/7/8的出现,给我们带来了很多方便,但是浏览器并不怎么支持,目前chrome应该是支持率最高的,所以为了兼容我们只能把代码转成es5,这应该算是我们最初使用babel的一个缘由,随着业务的开发 ...

  7. (6)webpack使用babel插件的使用

    为什么要使用babel插件? 首先要了解babel插件是干嘛的,随着js的语法规范发展,出现了越来越多的高级语法,但是使用webpack打包的时候,webpack并不能全部理解这些高级语法,需要我们使 ...

  8. 5个最顶级jQuery图表类库插件-Charting plugin

    转载: http://www.cnblogs.com/chu888chu888/archive/2012/12/22/2828962.html 作者:Leonel Hilario翻译:Terry li ...

  9. GBin1插件推荐之马可波罗(Marco Polo),jQuery的自动补齐插件 - Autocomplete Plugin

    让我们Google一下"jQuery autocomplete plugin"(jquery自动补齐插件).在过去的4年中,我已经Google了很多次这个组合了.然而结果并没有变化 ...

随机推荐

  1. Linux下的快捷键

    1:tab 键 命令补全 路径补全 2:Ctrl+C    命令的中止 3:Ctrl+D     退出当前的会话  exit   logout 4:Ctrl+l      clear  清屏    5 ...

  2. linux setup的安装

    setup作为一个l图形化的界面能够让我们更方便的去操作linux系统,而不需要记各种各样的配置文件的名称. 但是我们安装的最初的setup只有验证配置一个功能,我们还要安装完其他的功能才能使用其他的 ...

  3. oracle_hc.sql

    select event,count(1) from gv$session group by event order by 2;exec dbms_workload_repository.create ...

  4. CVTE前端一面

    1.如果不设置cookie失效时间:  关闭浏览器自动关闭. 有没有手写过cookie HttpOnly 2.跨域的几种方式 如何实现cors 2.web安全: xss,csrf    如何防范 3. ...

  5. How does the compilation and linking process work?

    The compilation of a C++ program involves three steps: Preprocessing: the preprocessor takes a C++ s ...

  6. springboot+VUE(二)

    入element-ui cnpm install element-ui -S 执行后,会下载element-ui的包到本地,同时会将配置加入到package.json的依赖块中. 通过命令行可以将最新 ...

  7. 【学习】数据处理基础知识(缺失值处理)【pandas】

    缺失数据(missing data)大部分数据分析应用中非常常见.pd设计目标之一就是让缺失数据的处理任务尽量轻松. pd 使用浮点值NaN(Not a Number) 表示浮点和非浮点数组中的缺失数 ...

  8. LeetCode 86. Partition List 划分链表 C++

    Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...

  9. Openstack EOL 版本离线安装源

    当Openstack EOL,网上的yum源无法安装openstack版本和rdo  ,则无法正常通过yum源直接安装openstack和rdo ,只是直接安装openstack后,也无法通过yum源 ...

  10. (转)Mysql字符串字段判断是否包含某个字符串的3种方法

    方法一: SELECT * FROM users WHERE emails like “%b@email.com%”; 方法二: 利用mysql 字符串函数 find_in_set(); SELECT ...