react-native--10Babel语法

在写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' }    # 输出结果.

 
 

参考

• [x] transform-object-rest-spread
• [x] three-dots-javascript-spread-operator
• [x] github issue
• [x] mozilla javascript class
• [x] JavaScript ES6中export及export default的区别
• [x] exports 和 module.exports 的区别