babel-preset-env:一个帮你配置babel的preset

时间: 2018-04-10阅读: 9628标签: babel

babel-preset-env 一个帮你配置babel的preset,根据配置的目标环境自动采用需要的babel插件。


问题

目前,几个presets就能让你确定babel应该支持那些功能:

  • babel-preset-es2015, babel-preset-es2016等:支持不同版本的ECMAScript规范。 es2015 转译了ES6比ES5的新特性, es2016 转译了ES2016比ES6的新特性等等。
  • babel-preset-latest: 支持现有所有ECMAScript版本的新特性,包括处于stage 4里的特性(已经确定的规范,将被添加到下个年度的)。

问题是这些presets有时做的多余了,举个例子,大部分现代浏览器已经支持ES6的generators了,但是如果你设置了babel-preset-es2015,generator函数还是会被转译成复杂的ES5代码


解决方案

babel-preset-env 功能类似 babel-preset-latest,优点是它会根据目标环境选择不支持的新特性来转译。

note:实验性的属性(babel-preset-latest不支持的)需要手动安装配置相应的plugins或者presets。这样你再不需要 es20xx presets了。

浏览器

你可以选择指定相应的浏览器配置:

  • browsers参数在这里查询 browserslist . 举个例子:

    • 支持每个浏览器最近的两个版本和IE大于等于7的版本所需的polyfill和代码转译。

      "babel": {
        "presets": [
          [
            "env",
            {
              "targets": {
                "browsers": ["last 2 versions", "ie >= 7"]
              }
            }
          ]
        ]
      },
      
      
    • 支持市场份额超过5%的浏览器。

      "targets": {
        "browsers": "> 5%"
      }
      
      
  • 指定浏览器版本:

     "targets": {
       "chrome": 56
     }
    
    

Node.js

如果你通过Babel编译你的Node.js代码,babel-preset-env 很有用,设置 "targets.node" 是 "current",支持的是当前运行版本的nodejs:

"babel": {
  "presets": [
    [
      "env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
},

我的GitHub上有个测试node参数的例子,请参考 async-iter-demo.


其他配置

下面会列举 babel-preset-env部分常用配置。所有配置请查看点击 env preset; 中文版本

modules (string, 默认值: "commonjs")

将ES6模块语法转换为另一种模块类型,可选值:

  • 各种流行的模块化规范:"amd"、 "commonjs"、 "systemjs"、 "umd"
  • 禁止转译:false

include, exclude (Array of strings, 默认值: [])

  • include 必须要转译的功能 (比如 覆盖有故障的本地功能)。跟单独启用相应插件是一样的。
  • exclude 禁止转译的功能。

useBuiltIns (boolean, 默认值: false)

babel为标准库中的新功能提供了polyfill,为内置对象,静态方法,实例方法,生成器函数提供支持。 babel-preset-env可以实现基于特定环境引入需要的polyfill。

两种使用方法:

  • core-js, 根据需要引入ES5,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";

note:

  • 在整个应用里只能引入一次polyfill,可以在 “main” 模块里一次引入。
  • useBuiltIns 会使浏览器下载的代码变少 (最终打包的文件大小变小了)。但是不会节约内存, 因为polyfill本身只会安装缺少的部分。

更多polyfill的内容请参考《Setting up ES6》中的章节:“Babel: configuring standard library and helpers

debug (boolean, default: false)

以下内容都会用console.log输出 :

  • 目标环境
  • 启用的transforms
  • 启用的plugins
  • 启用的polyfills

尝试下面的示例,瞧瞧console输出。

举例

下面的例子选自preset的readme文件:

{
  "presets": [
    [ "env", {
      "targets": {
        "safari": 10
      },
      "modules": false,
      "useBuiltIns": true,
      "debug": true
    }]
  ]
}

模块不会被转译,可以将imports和exports让webpack去处理。

debug 的输出如下:

Using targets:
{
  "safari": 10
}

Modules transform: false

Using plugins:
  transform-exponentiation-operator {}
  transform-async-to-generator {}

Using polyfills:
  es7.object.values {}
  es7.object.entries {}
  es7.object.get-own-property-descriptors {}
  web.timers {}
  web.immediate {}
  web.dom.iterable {}


env是如何基于目标环境去匹配哪些是需要转译的?

根据以下外部数据来确定目标环境支持的情况,可以定期执行build-data.js 来生成 plugins.json

下一步还能做什么?

有可以访问‘环境’ 的插件

未来计划让插件拥有检查当前环境具有什么可能性的能力,两个好处:

  • 一些plugins (比如对象扩展运算符) 目前通过选项告诉他们是否使用本地功能或polyfills。如果能知道当前 “环境”,就不需要配置了。

  • 基于babel的minifiers可以确定是否可以输出。比如,箭头函数。

简化presets

  • 基于ECMAScript版本的Presets (es2015 等)很多已经过时了 。Babel团队考虑会在未来的版本中移除他们 (比如, 通过废弃处理)。

  • 基于TC39不同阶段的提案的Presets (stage-0,1,2,3等) 也是去除的候选,因为在这些statges中的标准是不断变化的。提案可以在2个月内改变。因此,直接引用一些实验性的plugins会是更好的选择。

感谢

延伸阅读


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/609

关闭

前端中的编译原理:从零打造一个实用的 Babel 插件

说起编译原理,可能我们脑海中首先浮现的就是 “编译器” 这个词汇。维基百科上对编译器的定义是: 编译器是一种计算机程序,它会将某种编程语言写成的源代码(原始语言)转换成另一种编程语言(目标语言)

Babel_如何写一个Babel插件

Babel对代码进行转换,会将JS代码转换为AST抽象语法树(解析),对树进行静态分析(转换),然后再将语法树转换为JS代码(生成)。每一层树被称为节点。每一层节点都会有type属性,用来描述节点的类型。其他属性用来进一步描述节点的类型。

Babel 还是 Node 开发的“必需品”吗?

现在做 Node 开发还需要“麻烦”的 Babel 吗?毋庸置疑,Babel 曾经对构建和开发 Node.js 应用程序有过很大的影响,但随着 Node.js 的原生功能不断强大,Babel 或许也不再是 Node 开发的必需品。

入门babel,我们需要了解些什么

说实话,我从工作开始就一直在接触babel,然而对于babel并没有一个清晰的认识,只知道babel是用于编译javascript,让开发者能使用超前的ES6+语法进行开发。自己配置babel的时候,总是遇到很多困惑,下面我就以babel@7为例

webpack中配置babel

因为在webpack中,默认只能处理一部分es6的语法,一些更高级的es6和es7语法webpack不能处理,这时就需要第三方的loader即babel来帮助webpack来处理这些高级的语法

Babel 7 转码的正确姿势

Babel 转码的配置是每位前端童鞋在日常工作中都会遇到的。刚开始我也是在网上搜索各种配置方法,升级到 Babel 7 的时候又折腾了一把,所以决定把自己的心得和理解记录下来,希望能帮助到有需要的童鞋。

使用@babel/preset-typescript取代awesome-typescript-loader和ts-loader

谈@babel/preset-typescript的优越性之前,还是先说下awesome-typescript-loader方案是如何对TypeScript进行处理的。首先我们需要知道TypeScript是一个将TypeScript转换为指定版本JS代码的编译器

使用 Webpack 与 Babel 配置 ES6 开发环境

在项目根目录下新建一个配置文件—— webpack.config.js 文件:执行编译打包命令,完成后打开 bundle.js 文件发现 isNull 和 unique 两个函数没有被编译,和 webpack 官方说法一致:webpack 默认支持 ES6 模块语法,要编译 ES6 代码依然需要 babel 编译器。

Babel-loader,babel-core和babel-preset之间是什么关系

`babel-loader` 是一个 npm 包,它使得 webpack 可以通过 babel 转译 JavaScript 代码。babel 的功能在于「代码转译」,具体一点,即将目标代码转译为能够符合期望语法规范的代码。在转译的过程中

babel-polyfill使用与性能优化

本文主要内容包括:什么是babel-polyfill,如何使用,如何通过按需加载进行性能优化。babel只负责语法转换,比如将ES6的语法转换成ES5。但如果有些对象、方法,浏览器本身不支持,此时需要引入babel-polyfill来模拟实现这些对象、方法。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!