在写react native过程中会遇到一些生疏的语法，这里做一个持续更新的记录.
如何在命令行中运行babel代码？
准备工作
# 创建目录
$ mkdir babelpra
# 初始化项目配置(生成一个package.json)
$ cd babelpra
$ npm init # 根据提示填写配置
# 安装babel脚手架
$ npm install --save-dev babel-cli
# 指定支持编译哪些语法
$ npm install babel-preset-env babel-preset-react --save-dev
# 声明支持默认的babel、es2015、react jsx语法
$ vim .babelrc
{
"presets": ["env", "es2015", "react"]
}
编写代码
# 编写一个hello world.
$ mkdir src
$ vim src/class_hello.js
class Apps {
show() {
console.log('hello world!');
}
}
let apps = new Apps;
apps.show();
编译和运行代码
# 将es2015代码编译成原始js代码.
$ ./node_modules/.bin/babel src -d lib
# 运行代码.
$ node lib/class_hello.js
hello world! # 输出结果.
模块导入的两种形式
第一种: import xx from 'yy';
第二种: import { xx } from 'yy';
刚开始接触时会有点懵逼, 这里特意尝试去感受它们的区别.
不带花括号(第一种)
声明一个模块(注意事项)
export default == module.exports
export default 适用于类对象
module.exports 适用于变量对象
一个文件内只允许有一个export default, 多个export default会报错.
一个文件内如果既定义了export default 又定义了 module.exports, 那么会以module.exports为准, 也就是说module.exports的优先级要高于export defaults.
$ vim moduleNoBrace.js
module.exports = () => {console.log('debug: B')};
export default class A {
constructor(props) {
super(props)
console.log('debug: A');
}
}
对应导入(注意事项)
不带花括号的导入是指，导入的对象的变量名可以随便定义。
$ vim importNoBrace.js
import HelloWorld from './moduleNoBrace';
new HelloWorld();
编译和运行
$ ./node_modules/.bin/babel src -d lib
$ node lib/importNoBrace.js
debug: B
带花括号(第二种)
声明一个模块
$ vim src/modulebrace.js
export class A {
show() {
console.log('debug: A');
}
}
export const B = () => {console.log('debug: B')};
export const C = 'debug: C';
对应的导入
$ vim src/importbrace.js
import {A, B, C} from './modulebrace';
let a = new A;
a.show();
B();
console.log(C);
编译和运行
# 编译
$ ./node_modules/.bin/babel src -d lib
# 运行和输出
$ node lib/importbrace.js
debug: A
debug: B
debug: C
对象属性提取
声明一个模块
$ vim obj.js
module.exports = {
name: 'zt',
gender: 'male',
}
对应导入
$ vim src/importobj.js
import Hello from './obj';
let { name } = Hello; // 这里是本案例重点
console.log(name);
console.log(Hello.name);
console.log(Hello.gender);
编译和运行
$ ./node_modules/.bin/babel src -d lib
$ node lib/importobj.js
zt
zt
male
对象扩展
变量在创建时，可以引入其他已存在变量，这种引入并非“嵌套”；而是以扩展形式存在，先来看一个简单案例:
const va = {a: 'a', b: 'b', c: 'c'};
const vb = {x: 'x', y: 'y', ...va};
console.log(vb);
输出结果：
{x: 'x', y: 'y', a: 'a', b: 'b', c: 'c'};
准备环境
es2015尚不支持这种写法，未来es2018可能会支持这种写法; 但是这种风格的代码充斥在react-native的源码里，因此我也把它记录下来;
让es2015支持它的唯一途径就是增加plugin
# 安装插件
$ npm install --save-dev babel-plugin-transform-object-rest-spread
# 编辑.babelrc
$ vim .babelrc
{
"presets": ["env"],
"plugins": ["transform-object-rest-spread"]
}
编写代码
$ vim src/spread.js
const va = {a: 'a', b: 'b', c: 'c'};
const vb = {x: 'x', y: 'y', ...va};
console.log(vb);
编译和运行
$ ./node_modules/.bin/babel src -d lib
$ node lib/spread.js
{ x: 'x', y: 'y', a: 'a', b: 'b', c: 'c' } # 输出结果.
网友评论