脚本宝典收集整理的这篇文章主要介绍了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
文件的查询顺序
.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,我们大概看看都是用来干什么的?
syntax-trailing-function-commas 移除函数尾部的逗号
-
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;
-
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 = 'Hellont!'; // unicode string literals, newline and tab
-
transform-es2015-block-scoped-functions
if (x) {
function fn() {
// Do stuff
}
someObj.method = fn;
}
console.log(fn); // ReferenceError: fn is not defined
-
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-modules-commonjs
export default 42;
Object.defineProperty(exports, "__ESModule", {
value: true
});
exports.default = 42;
-
transform-es3-member-expression-literals 在使用保留关键字作为属性名的时候,此plugin会给它加上双引号。
foo.catch;
foo["catch"];
./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源码解析002 - 关于babelrc所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。