babel-preset-env

孙吉亮发布于2019-08-23 11:49 / 3111人阅读

摘要：一作用根据你支持的环境自动决定适合你的插件二历史版本已被弃用特点包含了所有年度预设，无需用户多带带指定某个预设。特点分别支持不同版本的规范，将转成，只将比新增加的特性转成。比如在整个应用里只能引入一次，可以在模块里一次引入。

一、作用

根据你支持的环境自动决定适合你的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新特性的支持情况。

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

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

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的时候，它们将会被转换

GPU云服务器云服务器 babel-preset-env

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97527.html

基于 Babel 的 npm 包最小化设置

摘要：翻译疯狂的技术宅原文本文首发微信公众号欢迎关注，每天都给你推送新鲜的前端技术文章本文描述了通过生成包的最小设置。是用于转换的预设。有关这两个属性的更多信息设置多平台包。表示使用上一节中的配置。结论以上是通过创建包最小库的方法。翻译：疯狂的技术宅原文：http://2ality.com/2017/07/npm... 本文首发微信公众号：jingchengyideng欢迎关注，每天都...

琛ｈ。 2019-08-23 15:39 评论0 收藏0
工程实战-ES6环境配置

摘要：最近在学习语法，故有了从零开始搭建环境的想法。默认会将这些辅助函数内联到每一个文件里，这样文件多的时候，项目就会很大。最近在学习ES6语法，故有了从零开始搭建ES6环境的想法。下面第一部分是单纯的ES6环境配置，第二部分是基于webpack环境的工程配置 1. 纯ES6环境配置 1.1 packages中的依赖项： devDependencies: { babel-cli: ^6...

novo 2019-08-22 14:03 评论0 收藏0
babel-loader配置_个人使用（仅供参考）

摘要：介绍把用最新标准编写的代码向下编译成可以在今天随处可用的版本。这主要是根据委员会发布流程来制定的。最终在阶段被标准正式采纳。也就是说这些包含的特性是比更新的特性但还未被写入标准进行发布。 Babel-loader介绍 Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。这一过程叫做源码到源码编译，也被称为转换编译。安装 npm i ba...

Harpsichord1207 2019-08-23 16:31 评论0 收藏0
webpack配置 babel

摘要：三集成所需要的依赖和在或加载模块时，对代码进行预处理，语法转化为语法。到目前位置，用于开发应用的环境已经配置好了。本系列主要学习webpack的配置。webpack自己间接的用过不少次，但是自己配置却没多少次，所以特地写写文章，学习webpack的配置，有不恰当的地方，欢迎指正。这次配置 babel 。若你对webpack的概念还不了解，先查看相应文档webpack中文文档一、初...

Songlcy 2019-08-22 16:12 评论0 收藏0
webpack4 的开发环境配置说明

摘要：的开发环境配置说明完整的的配置地址开发环境的搭建，总体而言就比较轻松，因为用户就是开发者们。的做法是在的字段配置类似这样这样配置后，当运行时，在里通过可以取到值以来做判断就可以啦。 webpack4 的开发环境配置说明完整的webpack4的配置clone地址： https://github.com/ziwei3749/... 开发环境的搭建，总体而言就比较轻松，因为用户就是开发者们...

fancyLuo 2019-08-23 10:34 评论0 收藏0