关于 Babel

如果我们没有配置一些规则,Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign )都不会转码。 所以,当这样的代码出现时:

const key = 'babel'
const obj = {
[key]: 'foo',
}

Babel 默认会编译成下面的代码

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 key = 'babel';
var obj = _defineProperty({}, key, Object.assign({}, { key: 'foo' }));

我们可以看到代码中多了一个名为_defineProperty的帮助函数,但是这个帮助函数仅仅在当前模块中生效,因此其他模块中如果用到了同样的语法,编译后就会出现大量的重复代码。

babel-polyfill

原理是当运行环境中并没有实现的一些方法,babel-polyfill 会给其做兼容。 但是这样做也有一个缺点,就是会污染全局变量,而且项目打包以后体积会增大很多,因为把整个依赖包也搭了进去。所以并不推荐在一些方法类库中去使用。

用法

1. `npm install --save babel-polyfill`
2. 在应用的入口引用,以确保它能够最先加载:
`import "babel-polyfill";` 或者
`require("babel-polyfill");`

babel-runtime

为了不污染全局对象和内置的对象原型,但是又想体验使用新鲜语法的快感。就可以配合使用babel-runtimebabel-plugin-transform-runtime。 比如当前运行环境不支持promise,可以通过引入babel-runtime/core-js/promise来获取promise, 或者通过babel-plugin-transform-runtime自动重写你的promise。也许有人会奇怪,为什么会有两个runtime插件,其实是有历史原因的:刚开始开始只有babel-runtime插件,但是用起来很不方便,在代码中直接引入helper 函数,意味着不能共享,造成最终打包出来的文件里有很多重复的helper代码。所以,Babel又开发了babel-plugin-transform-runtime,这个模块会将我们的代码重写,如将Promise重写成_Promise(只是打比方),然后引入_Promise helper函数。这样就避免了重复打包代码和手动引入模块的痛苦。

用法

1. `npm install --save-dev babel-plugin-transform-runtime`
2. `npm install --save babel-runtime`
3. 写入 `.babelrc`
{
"plugins": ["transform-runtime"]
}

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

'use strict';

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var key = 'babel';
var obj = (0, _defineProperty3.default)({}, key, 'foo');

不足

babel-runtime 不能转码实例方法,比如这样的代码:

'!!!'.repeat(3);
'hello'.includes('h');

这只能通过 babel-polyfill 来转码,因为 babel-polyfill 是直接在原型链上增加方法。

前端工程化-webpack篇之babel-polyfill与babel-runtime(三)的更多相关文章

  1. 前端工程化-webpack(babel编译ES6)

    最新版安装与普通安装 使用babel-loader编译ES6,需要遵循规范,安装babel-presets 规范列表 对应babel-loader,babel-preset安装最新版和普通版: pre ...

  2. 25、前端知识点--webpack篇之面试考点

    前端面试之webpack篇 https://blog.csdn.net/sinat_17775997/article/details/78122999 关于webpack的面试题 随着现代前端开发的复 ...

  3. 前端工程化 Webpack基础

    前端工程化 模块化 (js模块化,css模块化,其他资源模块化) 组件化 (复用现有的UI结构.样式.行为) 规范化 (目录结构的划分.编码规范化.接口规范化.文档规范化.Git分支管理) 自动化 ( ...

  4. 前端工程化webpack(一)

    webpack 的基本用法   1.app.js 引入模块 import moduleLog from './module.js' //引入moduleLog从./module.js 2.module ...

  5. 前端工程化-webpack(打包JS)(二)

    一.第一种打包方式 webpack entry<entry> output 假设目录结构如下: index.html是入口文件 打包app.js为bundle.js如下 app.js 当使 ...

  6. 前端工程化-webpack简介(一)

    本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependenc ...

  7. 使用webpack+vue.js构建前端工程化

    参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...

  8. 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)

    1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...

  9. 前端工程化(二)---webpack配置

    导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...

随机推荐

  1. Cloud9 开发环境部署

    安装和部署 cloud9 云端开发环境 简介 Cloud9 是亚马逊发布的一款基于云端的开发环境. AWS Cloud9 是一种基于云的集成开发环境 (IDE),您只需要一个浏览器,即可编写.运行和调 ...

  2. Log4net(三)——RollingFileAppender配置

    RollingFileAppender配置 log4net的记录介质很多,这里只总结最常用的方式之一:RollingFileAppender. 1.日志文件名是以文件大小进行变换的 如果日志文件大小到 ...

  3. Gym - 100851F - Froggy Ford(dijkstra)

    题目链接 参考   http://blog.csdn.net/KIJamesQi/article/details/52214990 题意 蛤蛤要从这岸去到对岸,河中有n块石头,现可以在河中添加一块石头 ...

  4. 从零开始搭建Salt Web之初探salt-api

    Salt-API入门 在Google搜索栏输入salt-api,会有一些讲述如何使用Salt-API的文章,确实有效,不过都是建立 在将Salt安装在默认目录下的情况下,即通过apt-get inst ...

  5. js定时器整理(执行一次、重复执行)

    在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime); 2.循环 ...

  6. STM32建立基本项目

    1.下载固件库解压 2.Keil建立项目,项目下建立三个文件夹3.各目录下从固件库中拷贝对应的目录 4.修改main.c文件 5.修改C++ 6.修改Include 7,编译.

  7. ms sqlserver2008r2 自动备份

    日常工作中利用SQL SQLSERVER 2008 的维护计划对数据库进行定期的备份,这样一方面可以对数据库进行备份保证数据安全另一方面也可以减轻对维护人员的负担. 一般对于WEB 服务器进 行维护都 ...

  8. Database学习 - mysql数据类型

    MySQL数据类型 可以被分为3类: 1.整型,数值类型 2.日期和时间类型 3.字符串(字符)类型 整型(INT) 数据类型 大小 M(默认值) 范围(有符号) 范围(无符号) 用途 tinyint ...

  9. Servlet3.0的注解自定义原生Listener监听器实战

    简介:监听器介绍和Servlet3.0的注解自定义原生Listener监听器实战 自定义Listener(常用的监听器 servletContextListener.httpSessionListen ...

  10. yum和rpm的区别

    rpm是由红帽公司开发的软件包管理方式,使用rpm我们可以方便的进行软件的安装.查询.卸载.升级等工作.但是rpm软件包之间的依赖性问题往往会很繁琐,尤其是软件由多个rpm包组成时.Yum(全称为 Y ...