react源码解析002 - 关于babelrc

liangzai_cool 发布于2019-08-20 15:34 / 861人阅读

摘要：目前官方提供这些，可以看到是被官方支持的。用到了很多，我们大概看看都是用来干什么的将的属性转成属性移除函数尾部的逗号编译模板编译箭头函数关于，可以查看更多。将和转成在使用保留关键字作为属性名的时候，此会给它加上双引号。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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