ES6语法的reactjs组件babel编译

#本文节选自：http://react-china.org/t/es6-react-npm/3879

首先，让我拥有一个react组件

MyComponent.jsx

import React from 'react';  //es5 无法识别import语句

const MyComponent = props=> {
  return <div>              //babel也无法识别jsx语法
    props:
    <pre>{JSON.stringify(props, null, 2)}</pre>
  </div>
}

export default MyComponent; 

##约定：
src 下用于存放源代码
lib 是编译后的代码，这个目录只读
所有包含 ES6 语法的文件名统一后缀为 .es6
所有包含 JSX 语法的文件后统一缀名为 .jsx

note:
假设源代码里还有另外两个文件 foo.es6 和 bar.js，简化起见都丢到 src 的根目录下。

说明

目前最常用的是 Babel5 版本，但是 Babel6 版本的设计更为精巧，已经非常推荐更新。也正是由于 Babel 有两个版本，所以开发过程中很有可能遇到这样的情况，
模块 A 的开发依赖于 Babel5 版本，而模块 B 依赖于 Babel6 版本。

# 解决这个问题最好的做法就是把 A 和 B 拆开，独立开发和发布。并且在发布到 NPM 的时候发布是的编译后的，也就是 ES5 版本的代码。

准备工作

如果你的机器上的 babel 是全局安装的，是时候卸载它了，因为它的版本不是 5 就是 6 ，会导致一些不可预见的问题。
npm uninstall babel-cli --global

正确的安装方式是把 babel-cli 作为 develeopment 的依赖
npm install babel-cli --save-dev

使用的时候并不是直接调用全局的 Babel 而是调用依赖里的 Babel 可执行文件
./node_modules/.bin/babel

如果按照前文的约定来组织代码，src 目录结构看起来是这样的
src
├── bar.js
├── foo.es6
└── MyComponent.jsx

#细节：
.babelrc

{
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ]
}

如果要转换 JSX 语法文件，就加上 react 的 preset，同时项目依赖里要添加babel-preset-react

npm install babel-preset-react --save-dev

开始编译

./node_modules/.bin/rimraf lib

./node_modules/.bin/babel src --copy-files --source-maps --extensions .es6,.es,.jsx --out-dir lib

输出目录的结构

lib
├── bar.js
├── foo.js
├── foo.js.map
├── MyComponent.js
└── MyComponent.js.map

解释

第一条命令 ./node_modules/.bin/rimraf lib
作用 编译前清空之前的 lib 目录，这是一个好习惯，可以杜绝对 lib 下的文件的任何手动更改。

第二条命令 ./node_modules/.bin/babel src --out-dir lib --source-maps --extensions .es6,.es,.jsx --copy-files
作用 遍历 src 目录下的文件，如果后缀名是 .es/.es6/.jsx 中的一种，就编译成 ES5，否则就直接拷贝到输出目录 lib 下

参数详解:
--out-dir lib 指定输出目录为 lib
--extensions .es6,.es,.jsx 指定需要编译的文件类型
--copy-files 对于不需要编译的文件直接拷贝
--source-maps 生成 souce-map 文件