react源碼解析002 - 關于babelrc

liangzai_cool 發布于2019-08-20 15:34 / 964人閱讀

摘要：目前官方提供這些，可以看到是被官方支持的。用到了很多，我們大概看看都是用來干什么的將的屬性轉成屬性移除函數尾部的逗號編譯模板編譯箭頭函數關于，可以查看更多。將和轉成在使用保留關鍵字作為屬性名的時候，此會給它加上雙引號。

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文件的查詢順序

查詢當前目錄下是否有.babelrc文件

查詢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，我們大概看看都是用來干什么的？

transform-class-properties 將es6的class屬性轉成es5屬性

syntax-trailing-function-commas 移除函數尾部的逗號

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 }

transform-es2015-template-literals 編譯es6模板

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

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 = "Hello
	!"; // unicode string literals, newline and tab

transform-es2015-arrow-functions 編譯箭頭函數

transform-es2015-block-scoped-functions

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

transform-es2015-classes

transform-es2015-object-super

transform-es2015-shorthand-properties

var o = { a, b, c };

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

transform-es2015-computed-properties

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

transform-es2015-for-of 關于for-of，可以查看更多。

check-es2015-constants 此plugin只是對const進行檢查，如果要將const轉成var，還需要和上面的transform-es2015-block-scoped-functions plugin配合使用。

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};

transform-es2015-parameters

transform-es2015-destructuring

transform-es2015-block-scoping 將const和let轉成es5

transform-es2015-modules-commonjs

export default 42;

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

exports.default = 42;

transform-es3-member-expression-literals 在使用保留關鍵字作為屬性名的時候，此plugin會給它加上雙引號。

foo.catch;

foo["catch"];

transform-es3-property-literals

./scripts/babel/transform-object-assign-require 使用Object.assign時自動require("object-assign")

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

云服務器 GPU云服務器 React 源碼 React源碼關于我們網站源碼 babelrc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82345.html

React入門0x002: jsx

摘要：概述也是，如是說。屬性集合，比如等屬性對應，是關鍵詞，所以用代替，也可以是自定義的屬性。形式送方外上人送上人孤云將野鶴，豈向人間住。莫買沃洲山，時人已知處。 0x000 概述 jsx也是js，如是說。 0x001 語法在上文React入門0x001-環境配置和 helloworld中，出現了一句奇怪的代碼： Hello, world! 這在html中沒有任何問題，但問題是他出現在...

hedzr 2019-08-26 12:17 評論0 收藏0
React入門0x003：jsx 和自由的組件

摘要：概述說起來，我喜歡的還是他的思想，在中，實際上沒有的區別，全部都是，就和一樣，可以將所有的資源等同視之。但是這時候又出來說，我要把寫在中，真是煩透咯不過，這種東西不過是年一輪回，就和時尚一樣。 0x000 概述說起來react，我喜歡的還是他的思想，在react中，實際上沒有html、css、js的區別，全部都是js，就和webpack一樣，可以將所有的資源等同視之。但是這在一開始，...

eechen 2019-08-23 11:25 評論0 收藏0
react源碼解析004 - 關于類型檢查工具flow

摘要：簡介是推出的類型檢查工具。使得咱們可以指定變量的類型，避免此類錯誤的發生。停用后臺進程，使用以上示例的源碼。配置文件這部分將結合的和官方文檔進行解析。一個文件簡稱，就類似于中的頭文件，是用來定義跨項目可用的全局變量。 Flow 簡介 flow是facebook推出的js類型檢查工具。js是一門弱類型語言，沒有從語言層面去保證變量類型不匹配的基本錯誤。flow使得咱們可以指定變量的類型，...

huayeluoliuhen 2019-08-20 15:35 評論0 收藏0
React入門0x009: 事件處理

摘要：概述上一章講咯生命周期，這一章就是事件處理咯事件綁定綁定一個外部函數按鈕綁定一個內部函數按鈕解決函數綁定的問題上面的栗子有個問題在內無法訪問內的資源，比如按鈕可以這么解決這個問題按鈕或者按鈕或者按鈕第三中方式需要支持 0x000 概述上一章講咯生命周期，這一章就是事件處理咯 0x001 事件綁定 // 綁定一個外部函數 function handleClick(event) { ...

objc94 2019-08-23 11:34 評論0 收藏0
從react-start到co源碼(一)

摘要：安裝這個預設主要包含了如下兩個插件實現熱加載捕獲中的方法并展現在界面上修改上述的文件文件通過上面的幾個步驟我們就大致完成了開發環境的基本搭建。應該在中進行配置以上就是簡單的環境搭建后面會推出后續的文章。 react作為當前十分流行的前端框架，相信很多前端er都有蠢蠢欲動的學習它的想法。工欲善其事，必先利其器。這篇文章就簡單的給大家介紹一下如何我快速的搭建一個react前端開發環境。主要...

gekylin 2019-08-20 13:44 評論0 收藏0