react源碼解析002 - 關於babelrc

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, y, ...z };
   console.log(n); // { x: 1, y: 2, a: 3, 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 = 'Hello\u{000A}\u{0009}!'; // unicode string literals, newline and tab

   var b = 3; // binary integer literal
   var o = 7; // octal integer literal
   const u = 'Hello\n\t!'; // 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