babel简介

原文：https://github.com/liushuigs/react-source-learning/blob/master/root/what-is-eslint.md

.babelrc是babel的配置文件，使用json5的语法。babel是用来将es6的js转成es5的工具。而json5是json格式的一种扩展，支持在json文件中写注释，使用尾部逗号，不需在key上加双引号等。例如：

{
    foo: 'bar',while: true,this: 'is a 
multi-line string',// this is an inline comment
    here: 'is another',// inline comment

    /* this is a block comment
       that continues on another line */

    hex: 0xDEADbeef,half: .5,delta: +10,to: Infinity,// and beyond!

    finally: 'a trailing comma',oh: [
        "we shouldn't forget",'arrays can have','trailing commas too',],}

.babelrc文件的查询顺序

1. 查询当前目录下是否有.babelrc文件

2. 查询package.json文件是否有"babel": {}这样的选项

.babelrc的详细参数，可以查看这里。咱只讨论一下react用的几个参数。

presets

presets是指一组babel插件。目前官方提供这些presets，

env
es2015
es2016
es2017
latest (deprecated in favor of env)
react
flow

可以看到,react preset是被官方支持的。当然，你也可以创建自己的presets。

ignore

igore中的third-party是指这个文件:src/__mocks__/vendor/third_party/WebComponents.js。但是react为什么会将WebComponents.js文件放到项目中呢？（TODO）

plugins

presets没有覆盖到的plugin，就需要写入plugins配置。react用到了很多plugins，我们大概看看都是用来干什么的？

1. transform-class-properties 将es6的class属性转成es5属性

2. syntax-trailing-function-commas 移除函数尾部的逗号

3. transform-object-rest-spread

   let { x,y,...z } = { x: 1,y: 2,a: 3,b: 4 };
   console.log(x); // 1
   console.log(y); // 2
   console.log(z); // { a: 3,b: 4 }

   let n = { x,...z };
   console.log(n); // { x: 1,b: 4 }

4. transform-es2015-template-literals 编译es6模板

   `foo${bar}`; =>     "foo" + bar;

5. transform-es2015-literals

   var b = 0b11; // binary integer literal
   var o = 0o7; // octal integer literal
   const u = 'Hellou{000A}u{0009}!'; // unicode string literals,newline and tab

   var b = 3; // binary integer literal
   var o = 7; // octal integer literal
   const u = 'Hellont!'; // unicode string literals,newline and tab

6. transform-es2015-arrow-functions 编译箭头函数

7. transform-es2015-block-scoped-functions

   if (x) {
       function fn() {
           // Do stuff
       }
       someObj.method = fn;
   }
   console.log(fn); // ReferenceError: fn is not defined

8. transform-es2015-classes

9. transform-es2015-object-super

10. transform-es2015-shorthand-properties

    var o = { a,b,c };

    var o = { a: a,b: b,c: c };

11. transform-es2015-computed-properties

    var obj = {
      ["x" + foo]: "heh",["y" + bar]: "noo",foo: "foo",bar: "bar"
    };

12. transform-es2015-for-of 关于for-of，可以查看更多。

13. check-es2015-constants 此plugin只是对const进行检查，如果要将const转成var，还需要和上面的transform-es2015-block-scoped-functions plugin配合使用。

14. transform-es2015-spread In loose mode,all iterables are assumed to be arrays.(TODO know more about es6 iterables)

    var a = ['a','b','c'];
    var b = [...a,'foo'];
    
    var c = { foo: 'bar',baz: 42 };
    var d = {...c,a: 2};

15. transform-es2015-parameters

16. transform-es2015-destructuring

17. transform-es2015-block-scoping 将const和let转成es5

18. transform-es2015-modules-commonjs

    export default 42;

    Object.defineProperty(exports,"__esModule",{
      value: true
    });
    
    exports.default = 42;

19. transform-es3-member-expression-literals 在使用保留关键字作为属性名的时候，此plugin会给它加上双引号。

    foo.catch;

    foo["catch"];

20. transform-es3-property-literals

21. ./scripts/babel/transform-object-assign-require 使用Object.assign时自动require('object-assign')

22. transform-react-jsx-source Adds source file and line number to JSX elements.

f

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!