Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

babel-preset-browser

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

babel-preset-browser

babel preset for old IEs and `AMD` modules

  • 1.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

babel-preset-browser

面向IE6+浏览器的使用AMD模块的Babel6预设。

安装

$ npm install --save-dev babel-preset-browser

使用方式

通过.babelrc(推荐)

{
  "presets": ["browser"]
}

通过命令行

$ babel script.js --presets browser

插件选择和配置

这一部分主要介绍本预设使用的ES特性和相关插件配置。

ES3

以下两个插件用于解决ES3浏览器不支持使用关键字(如:default)作为属性名的问题。

  • transform-es3-member-expression-literals
  • transform-es3-property-literals

翻译思路是将ES5代码翻译为ES3支持的代码。

ES2015

本预设从ES2015预设中选择了以下几个插件:

  • transform-es2015-template-literals: 用于处理字符串模板,在这个版本里面使用loose模式。
  • transform-es2015-literals:用于处理二进制和八进制字面量,由于条件限制,不能处理字符串中和eval中的常量。
  • transform-es2015-arrow-functions:将箭头函数转换成普通函数,不开启spec模式以简化转换后的代码,因此要避免对使用箭头函数使用new/call/apply,以免发生错误。
  • transform-es2015-block-scoped-functions:这个用于解决旧浏览器不支持块级函数声明的问题,不过一般情况下建议使用let/const声明块级函数。
  • transform-es2015-classes:用于处理类,与ES7的transform-class-properties一共使用,以实现完整的类定义模型。在旧浏览器中不支持Getter/Setter机制,因此使用loose模式。
  • transform-es2015-shorthand-properties:用于将省略的属性名还原。
  • transform-es2015-computed-properties:用于处理计算属性名。旧浏览器中不支持Getter/Setter机制,因此请不要使用Getter/Setter以免出现运行时错误。
  • check-es2015-constants:校验const变量有没有被赋值。
  • transform-es2015-spread:数组延展。
  • transform-es2015-parameters:函数参数处理。
  • transform-es2015-destructuring:解构。
  • transform-es2015-block-scoping:块级作用域,不支持tdz属性,变量的作用域为当前块。

以下插件或者功能没有被选择:

  • transform-es2015-function-name:这个插件会额外增加代码量,并且没有什么实际意义。
  • transform-es2015-object-super:由于旧浏览器不支持Object.getPrototypeOf,所以不支持。
  • transform-es2015-duplicate-keys:实际书写中出现重复键通常不合理,应当在书写时避免。
  • transform-es2015-for-of:不使用此插件,使用第三方插件实现for-of-array功能。
  • transform-es2015-sticky-regex:功能不常用,并且需要运行时支持。
  • transform-es2015-unicode-regex:功能不常用,并且需要运行时支持。
  • transform-es2015-typeof-symbol:默认不支持Symbol
  • transform-es2015-modules-commonjs:使用自定义的AMD模块。
  • transform-regenerator:不支持Generator

以下第三方插件用于补足功能:

  • transform-modules-amd:自定义的AMD模型,与标准版的区别是通过缩减ES6代码的功能,以满足AMD规范。
  • transform-for-of-array:补充for-of循环,不考虑任何迭代器,将所有对象当作数组或者类数据处理。

ESNEXT

以下未定稿但比较稳定的插件并加入到预设中:

  • transform-class-properties:补足类功能。
  • transform-object-rest-spread:用于补足解构功能。
  • babel-plugin-syntax-export-extensions:补足模块功能,已经在transform-modules-amd中引入,无需重复。

这三个插件主要是对ES2015缺失的功能进行一些补充,以保证特征的完整性。

以下插件没有补添加但是推荐单独引入:

  • transform-exponentiation-operator:支持**符号。
  • syntax-trailing-function-commas:允许函数参数末尾添加不必要的逗号,不符合使用规范没有被添加,如果你的使用规范推荐添加可使用。
  • transform-function-bind:支持::运算符,需要可以加入。
  • transform-do-expressions:do运算符号,可以在表达式中添加代码块,不是很符合JS的思路,没有直接加入。

这四个插件属于ES7提供的新语法糖

以下插件因浏览器原因不应当被引入:

  • transform-async-to-generator:浏览器不支持Generator

以下插件已经被babel废弃,或者有没完整的实现,尽量避免使用:

  • transform-class-constructor-call:类构造函数非实例化,已经被废弃。
  • transform-decorators:babel6至今没有给出完整的实现,也找不到比较不错的替代插件。

FAQs

Package last updated on 31 May 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc