成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

react源碼解析002 - 關(guān)于babelrc

liangzai_cool / 975人閱讀

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

babel簡(jiǎn)介

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

.babelrc是babel的配置文件，使用json5的語(yǔ)法。babel是用來(lái)將es6的js轉(zhuǎn)成es5的工具。而json5是json格式的一種擴(kuò)展，支持在json文件中寫(xiě)注釋?zhuān)褂梦膊慷禾?hào)，不需在key上加雙引號(hào)等。例如：

{
    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文件的查詢(xún)順序

查詢(xún)當(dāng)前目錄下是否有.babelrc文件

查詢(xún)package.json文件是否有"babel": {}這樣的選項(xiàng)

.babelrc的詳細(xì)參數(shù)，可以查看這里。咱只討論一下react用的幾個(gè)參數(shù)。

presets

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

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

可以看到,react preset是被官方支持的。當(dāng)然，你也可以創(chuàng)建自己的presets。

ignore

igore中的third-party是指這個(gè)文件:src/__mocks__/vendor/third_party/WebComponents.js。但是react為什么會(huì)將WebComponents.js文件放到項(xiàng)目中呢？（TODO）

plugins

presets沒(méi)有覆蓋到的plugin，就需要寫(xiě)入plugins配置。react用到了很多plugins，我們大概看看都是用來(lái)干什么的？

transform-class-properties 將es6的class屬性轉(zhuǎn)成es5屬性

syntax-trailing-function-commas 移除函數(shù)尾部的逗號(hào)

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 編譯箭頭函數(shù)

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 關(guān)于for-of，可以查看更多。

check-es2015-constants 此plugin只是對(duì)const進(jìn)行檢查，如果要將const轉(zhuǎn)成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轉(zhuǎn)成es5

transform-es2015-modules-commonjs

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

exports.default = 42;

transform-es3-member-expression-literals 在使用保留關(guān)鍵字作為屬性名的時(shí)候，此plugin會(huì)給它加上雙引號(hào)。

foo.catch;
foo["catch"];

transform-es3-property-literals

./scripts/babel/transform-object-assign-require 使用Object.assign時(shí)自動(dòng)require("object-assign")

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

f

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82345.html

相關(guān)文章

  • React入門(mén)0x002: jsx

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

    hedzr 評(píng)論0 收藏0

  • React入門(mén)0x003：jsx 和自由的組件

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

    eechen 評(píng)論0 收藏0

  • react源碼解析004 - 關(guān)于類(lèi)型檢查工具flow

    摘要：簡(jiǎn)介是推出的類(lèi)型檢查工具。使得咱們可以指定變量的類(lèi)型，避免此類(lèi)錯(cuò)誤的發(fā)生。停用后臺(tái)進(jìn)程，使用以上示例的源碼。配置文件這部分將結(jié)合的和官方文檔進(jìn)行解析。一個(gè)文件簡(jiǎn)稱(chēng)，就類(lèi)似于中的頭文件，是用來(lái)定義跨項(xiàng)目可用的全局變量。 Flow 簡(jiǎn)介 flow是facebook推出的js類(lèi)型檢查工具。js是一門(mén)弱類(lèi)型語(yǔ)言，沒(méi)有從語(yǔ)言層面去保證變量類(lèi)型不匹配的基本錯(cuò)誤。flow使得咱們可以指定變量的類(lèi)型，...

    huayeluoliuhen 評(píng)論0 收藏0

  • React入門(mén)0x009: 事件處理

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

    objc94 評(píng)論0 收藏0

  • 從react-start到co源碼(一)

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

    gekylin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<