#本文节选自: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 文件