前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一文带你了解babel-preset-env

一文带你了解babel-preset-env

作者头像
用户1515472
发布2019-07-24 14:19:25
9100
发布2019-07-24 14:19:25
举报
文章被收录于专栏:忽如寄的前端周刊

相信很多人都和我一样,刚接触babel的时候都是使用 babel-preset-es2015 这个预设套餐的,但是显然目前而言 babel-preset-env 会是一个更好的选择,babel-preset-env 可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5。

吸引人的地方在于我们可以通过 [.browserslistrc](https://github.com/browserslist/browserslist) 文件来指定特定的目标浏览器。当然也可以通过targets选项的browsers选项指定。不过如果你的目标浏览器支持 es modules 特性,browsers 选项则会失效,如下:

代码语言:javascript
复制
{
    "presets": [
        ["@babel/preset-env"
            "targets": {
                "esmodules": true
            }
        ]
    ]
}

同样也可以指定Node.js的版本:

代码语言:javascript
复制
{
    "presets": [
        ["@babel/preset-env"
            "targets": {
                "node": "6.10"
            }
        ]
    ]
}

如果node的选项值为 current 则说明是指定运行时的node.js版本。

代码语言:javascript
复制
{
    "presets": [
        ["@babel/preset-env"
            "targets": {
                "node": "current"
            }
        ]
    ]
}

我们需要知道的是制定个targets的browsers时使用的是 browserslist ,我们可以在 .babelrc 文件、package.json文件、browserslist中指定浏览器版本选项,优先级规则是 .babelrc文件定义了则会忽略 browserslist.babelrc 没有定义则会搜索 browserslistpackage.json 两者应该只定义一个,否则会报错。

babel-preset-env 的主要参数选项有:

  • targets
  • targets.node
  • targets.browsers
  • spec : 启用更符合规范的转换,但速度会更慢,默认为 false
  • loose:是否使用 loose mode,默认为 false
  • modules:将 ES6 module 转换为其他模块规范,可选 "adm" | "umd" | "systemjs" | "commonjs" | "cjs" | false,默认为 false
  • debug:启用debug,默认 false
  • include:一个包含使用的 plugins 的数组
  • exclude:一个包含不使用的 plugins 的数组
  • useBuiltIns:为 polyfills 应用 @babel/preset-env ,可选 "usage" | "entry" | false,默认为 false
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档