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 commenthere: 'is another', // inline comment/* this is a block commentthat 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 = '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
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
转成es5transform-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.
f
react源码解析002 - 关于babelrc相关推荐
- 《React源码解析》系列完结!
前言 距离第一篇<React源码解析(一)>已经过去将近4个月的时间,由于是我第一次进行源码解析相关的写作,思路和文笔还不够成熟.一百多天以来,我基于读者反馈反思这几篇文章中的不足,同时也 ...
- 人人都能读懂的react源码解析(大厂高薪必备)
人人都能读懂的react源码解析(大厂高薪必备) 1.开篇(听说你还在艰难的啃react源码) 本教程目标是打造一门严谨(严格遵循react17核心思想).通俗易懂(提供大量流程图解,结合demo ...
- # React源码解析之fiber的初次渲染与更新(下)
React源码解析之fiber的初次渲染与更新(下) 经历一个月的学习整理,站在前人的肩膀上,对React有了一些浅薄的理解,希望记录自己的学习过程的同时也可以给大家带来一点小帮助.如果此系列文章对您 ...
- react源码解析15.schedulerLane
react源码解析15.scheduler&Lane 视频讲解(高效学习):进入学习 往期文章: 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 ...
- react源码解析之stack reconciler
关于源码解读的系列文章,可以关注我的github的这个仓库, 现在才刚刚写,后续有空就写点.争取把react源码剖析透学习透.有不正确的地方希望大家帮忙指正.大家互相学习,共同进步. 本篇文章是官方文 ...
- React 源码系列 | React Context 详解
目前来看 Context 是一个非常强大但是很多时候不会直接使用的 api.大多数项目不会直接使用 createContext 然后向下面传递数据,而是采用第三方库(react-redux). 想想项 ...
- react源码中的fiber架构
先看一下FiberNode在源码中的样子 FiberNode // packages/react-reconciler/src/ReactFiber.old.js function FiberNode ...
- 1.开篇(听说你还在艰难的啃react源码)
人人都能读懂的react源码解析(大厂高薪必备) 1.开篇(听说你还在艰难的啃react源码) 本教程目标是打造一门严谨(严格遵循react17核心思想).通俗易懂(提供大量流程图解,结合demo ...
- react.lazy 路由懒加载_React lazy/Suspense使用及源码解析
React v16.6.0已经发布快一年了,为保障项目迭代发布,没有及时更新react版本,最近由于开启了新项目,于是使用新的react版本进行了项目开发.项目工程如何搭建,如何满足兼容性要求,如何规 ...
最新文章
- 远程桌工具-Remote Desktop Organizer
- 三极管的耐压与hFE之间是什么关系?
- 手把手带你入门 Spring Security!
- 新手第四课-PaddlePaddle快速入门
- html游戏代码_实现了代码自动生成,开发效率妥妥的提升,升职加薪跟上
- Tkinter的entry组件
- [收藏] 微软850位顶级人才不做Windows研发
- 一个C#写的调用外部进程类
- 递归转手动管理栈的非递归
- (void __user *)arg 中__user的作用
- Matlab实现小世界网络生成及其分析
- pandas-task08-文本数据.md
- android qq勋章墙实现,科技教程:如何在手机QQ中进入勋章墙?
- 浏览器的窗口大小被改变时触发的事件window.onresize
- 已更新 联通 电信 tiny模式
- (转)webpack简介
- vscode 侧边栏源代码管理不见了
- Linux操纵细碎以太网卡的装配及设置-2
- 政府安全资讯精选 2017年第十二期 中国网络安全漏洞披露平均效率远超美国; 美国美国国土安全部发布指令,要求联邦机构强化Web和电子邮件安全...
- 数字信号分析学习思想整理 | 基本框架