Giter Club home page Giter Club logo

babel-preset-browser's Introduction

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至今没有给出完整的实现,也找不到比较不错的替代插件。

babel-preset-browser's People

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.