Babel插件:@babel/plugin-transform-runtime
一 概述
每个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的更多相关文章
- [转] 以 async/await 为例,说明 babel 插件怎么搭
你一定碰到过这些库 babel-polyfill 项目地址:https://github.com/babel/babel/blob/master/packages/babel-polyfill 通过两 ...
- 从AST编译解析谈到写babel插件
之前一直在掘金上看到一些关于面试写babel插件的文章,最近也在学,以下就是学习后的总结. 关键词:AST编译解析, babel AST编译解析 AST[维基百科]:在计算机科学中,抽象语法树(Abs ...
- 开发一个简单的babel插件
前言 对于前端开发而言,babel肯定是再熟悉不过了,工作中肯定会用到.除了用作转换es6和jsx的工具之外,个人感觉babel基于抽象语法树的插件机制,给我们提供了更多的可能.关于babel相关概念 ...
- 【babel+小程序】记“编写babel插件”与“通过语法解析替换小程序路由表”的经历
话不多说先上图,简要说明一下干了些什么事.图可能太模糊,可以点svg看看 背景 最近公司开展了小程序的业务,派我去负责这一块的业务,其中需要处理的一个问题是接入我们web开发的传统架构--模块化开发. ...
- 使用babel插件集
1).打开配置文件".babelrc",配置插件集,代码如下: { "presets":["latest"] } 2).安装babel插件集 ...
- 快速写一个babel插件
es6/7/8的出现,给我们带来了很多方便,但是浏览器并不怎么支持,目前chrome应该是支持率最高的,所以为了兼容我们只能把代码转成es5,这应该算是我们最初使用babel的一个缘由,随着业务的开发 ...
- (6)webpack使用babel插件的使用
为什么要使用babel插件? 首先要了解babel插件是干嘛的,随着js的语法规范发展,出现了越来越多的高级语法,但是使用webpack打包的时候,webpack并不能全部理解这些高级语法,需要我们使 ...
- 5个最顶级jQuery图表类库插件-Charting plugin
转载: http://www.cnblogs.com/chu888chu888/archive/2012/12/22/2828962.html 作者:Leonel Hilario翻译:Terry li ...
- GBin1插件推荐之马可波罗(Marco Polo),jQuery的自动补齐插件 - Autocomplete Plugin
让我们Google一下"jQuery autocomplete plugin"(jquery自动补齐插件).在过去的4年中,我已经Google了很多次这个组合了.然而结果并没有变化 ...
随机推荐
- Linux下的快捷键
1:tab 键 命令补全 路径补全 2:Ctrl+C 命令的中止 3:Ctrl+D 退出当前的会话 exit logout 4:Ctrl+l clear 清屏 5 ...
- linux setup的安装
setup作为一个l图形化的界面能够让我们更方便的去操作linux系统,而不需要记各种各样的配置文件的名称. 但是我们安装的最初的setup只有验证配置一个功能,我们还要安装完其他的功能才能使用其他的 ...
- oracle_hc.sql
select event,count(1) from gv$session group by event order by 2;exec dbms_workload_repository.create ...
- CVTE前端一面
1.如果不设置cookie失效时间: 关闭浏览器自动关闭. 有没有手写过cookie HttpOnly 2.跨域的几种方式 如何实现cors 2.web安全: xss,csrf 如何防范 3. ...
- How does the compilation and linking process work?
The compilation of a C++ program involves three steps: Preprocessing: the preprocessor takes a C++ s ...
- springboot+VUE(二)
入element-ui cnpm install element-ui -S 执行后,会下载element-ui的包到本地,同时会将配置加入到package.json的依赖块中. 通过命令行可以将最新 ...
- 【学习】数据处理基础知识(缺失值处理)【pandas】
缺失数据(missing data)大部分数据分析应用中非常常见.pd设计目标之一就是让缺失数据的处理任务尽量轻松. pd 使用浮点值NaN(Not a Number) 表示浮点和非浮点数组中的缺失数 ...
- 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 ...
- Openstack EOL 版本离线安装源
当Openstack EOL,网上的yum源无法安装openstack版本和rdo ,则无法正常通过yum源直接安装openstack和rdo ,只是直接安装openstack后,也无法通过yum源 ...
- (转)Mysql字符串字段判断是否包含某个字符串的3种方法
方法一: SELECT * FROM users WHERE emails like “%b@email.com%”; 方法二: 利用mysql 字符串函数 find_in_set(); SELECT ...