babel-preset-env

一、作用

根据你支持的环境自动决定适合你的Babel插件

二、历史版本(已被弃用)

1、babel-preset-latest

1.1 特点

包含了所有年度预设( babel-preset-es2015、babel-preset-es2016、babel-preset-es2017),无需用户单独指定某个预设。

1.2 缺点

部分转码多余 :如果使用默认设置,babel会将所有ES6与ES6+的新特性转成复杂的es5的代码。但是大部分现在浏览器已经支持ES6的部分特性。

2、babel-preset-es2015、babel-preset-es2016、babel-preset-es2017

2.1 特点

分别支持不同版本的ECMA规范,es2015将es6转成es5,es2016只将比es6新增加的特性转成es5。es2017也是只将比es6新增加的特性转成es5

2.2 缺点

如果同时要使用这三个插件,配置项书写麻烦

三、 配置

1、在没有任何配置选项的情况下

babel-preset-env 与 babel-preset-latest的行为相同

//默认设置
{
  "presets": ["env"]
}

2、stage-x(实验阶段presets)

默认不会包含stage-x插件,需要手动配置支持

//设置 stage-2的插件
{
  "presets": [
    ["env"],
    "stage-2"
  ]
}

3、可以设置的选项

以下仅为部分常用选项,其他请看官网

3.1 target 设置支持的运行环境

{ [string]: number | string }, 默认为 {}。

3.2 modules 将ES6模块语法转换为另一种模块类型

"amd" | "umd" | "systemjs" | "commonjs" | false, 默认为 "commonjs".

将其设置为 false 就不会转换模块。

3.3 debug console.log输出插件等信息

boolean, 默认为 false。

将使用的目标浏览器/插件和在 数据插件版本 中指定的版本用 console.log 输出。

3.4 useBuiltIns

boolean,默认为 false。

将polyfill应用于 babel-preset-env 中。

babel为新特性提供了polyfill,(例如为内置对象,静态方法,实例方法,生成器函数等提供了支持。 babel-preset-env可以基于特定环境引入需要的polyfill。

两种使用方法:

  • 方法一 core.js, 根据需要引入ES6,ES6+标准方法的实现。
 //安装 polyfill
 npm install core-js --save
      
 //使用polyfill
 import "core-js"
  
  • 方法二 babel-polyfill,包含了core-js 和regenerate-runtime (提供 async 语法编译后的运行时环境)。
 //安装 polyfill
 npm install babel-polyfill --save
    
 //使用polyfill
 import "babel-polyfill";

两种方法最终都会根据环境转译成特定的polyfill。 比如:

import "core-js/modules/es7.string.pad-start";
import "core-js/modules/es7.string.pad-end";
import "core-js/modules/web.timers";
import "core-js/modules/web.immediate";
import "core-js/modules/web.dom.iterable";

在整个应用里只能引入一次polyfill,可以在 “main” 模块里一次引入。多次 imports 或 requires babel-polyfill 会引起报错,因为它可能导致全局冲突和其他难以追踪的问题。

例如

{
  "presets": [
    [ "env", {
      "targets": {
        "safari": 10 //目标运行平台为safari10
      },
      "modules": false,//不转换模块
      "useBuiltIns": true,//使用polyfill
      "debug": true 
    }]
  ]
}

四、运行原理

下载 babel-preset-env源码 :https://github.com/babel/babe...

1、生成babel插件与平台的对应关系

定期执行 scripts/build-data.js用来生成最新的 build-ins.json 与 plugins.json

npm run build-data

1.1 使用 ECMA标准兼容性列表compat-table 确定平台(浏览器…)不同版本对js新特性的支持情况。

clipboard.png

1.2 使用 data/build-in-features.js 、 data/plugin-features.js 确定babel插件与js新特性的映射关系,如下图

clipboard.png

1.3 使用 ECMA标准兼容性列表 compat-table 与 data/build-in-features.js 、plugin-features.js 相匹配,来得到 babel的插件与各个平台版本的对应关系,如下build-ins.json中的部分代码
clipboard.png

2、配置与解析tagets

使用browserslist 支持的有效的查询格式来书写配置中的targets, 在源码内部也会使用 browserslist 来解析这些信息

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

3、确定在 preset 的插件中支持的最低浏览器版本。

如果你的项目需要支持 IE8 和 Chrome 55 。它必须包括IE8所支持的所有插件。

4、支持 "node": "current" 用来编译当前项目的node版本。

例如,如果你基于Node 6构建项目,箭头函数将不会被转换。但项目基于Node 0.12的时候,它们将会被转换

280 声望
8 粉丝
0 条评论
推荐阅读
7. 中央处理器-The Central Processing Unit(CPU)
计算机的心脏"中央处理单元",简称 "CPU"。CPU 负责执行程序,程序由一个个操作(又叫指令,指示"计算机要做什么)组成。如果是数学指令,比如加/减,CPU 会让 ALU 进行数学运算,也可能是内存指令,CPU 会和内存...

二丽1阅读 1.5k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.4k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 7.9k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6.1k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs40阅读 6.4k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.5k评论 6

280 声望
8 粉丝
宣传栏