刘贵学博客

React 边写边学 2:使用Babel

缘由

《React 边写边学 1:Hello World》用的是 CDN 上的库和转换器,正式的React项目环境我们需要使用其他的转换编译工具。

JSX 到 ES5 的编译/转换器工具有很多,比如:

  • React-tools jsx 命令
  • Jsxtransformer
  • reactify
  • Traceur
  • Babel

目前使用最多的是Babel ,Babel支持的功能也比较:

  • ES6/ES2015 转 ES5 (3个 stage)
  • JSX 转 ES5
  • ES7 转 ES5
  • CoffeeScript 转 ES5

《圣经·创世纪》第11章中说,人类最早的时候都住在一个地方,讲一种语言。他们决定造一座通天的塔,所有的人住在里面,人类再也不会分散。上帝不同意,他将人类拆散到世界各地,让人类讲不同的语言,从此难于沟通。
因此,"巴别塔"就成了混乱和语言不通的代名词,是《圣经》中最广为人知的故事之一。

Babel 的使用方法

babel src/input.jsx -o dist/output.js

将 input.jsx 格式的内容 编译为 ES5的 output.js

实例项目文件

所有项目文件

├── package.json  //npm 项目配置文件
├── .babelrc        //babel配置文件
├── index.html      //HTML 入口文件
└── src
     ├── Hello.jsx   //Hello 组件
     └── index.jsx   //入口

1 package.json

npm 项目配置文件可以手动新建

npm init            //全部回车默认
npm install --save react react-dom babel babel-cli babel-core
npm install --save   babel-preset-es2015 babel-preset-react 
npm install --save  browserify react-hot-loader webpack

新建完成后的文件如下:

{
  "name": "2_babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src/index.jsx -o dist/index.js&&babel src/Hello.jsx -o dist/Hello.js",
    "pack": "webpack -d dist/index.js dist/all.js",
    "start": "http-server",
    "restart":"npm run build && npm run pack && npm run start"
  },
  "author": "Guixue",
  "license": "ISC",
  "devDependencies": {
    
  },
  "dependencies": {
    "react": "^15.0.2",
    "react-dom": "^15.1.0",
    "babel": "^6.5.2",
    "babel-cli": "^6.9.0",
    "babel-core": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "browserify": "^13.0.1",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.13.1"
  }
}

2 .babelrc

babel 编译配置文件,默认的编译参数

{
  "presets": ["es2015", "react"]
}

3 index.html

HTML页面:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>React Use Babel tool</title>
   
</head>

<body>
  

    <div id="container"></div>
    <script src="dist/all.js"></script>
</body>
</html>

4 src/Hello.jsx

Hello 组件:

import React from 'react';


export default class Hello extends React.Component{
    render() {
        return (<div>Hello {this.props.name}</div>);
    }
}

5 src/index.jsx

Index入口:

import React from 'react';
import ReactDOM from 'react-dom';


import Hello from './Hello';

ReactDOM.render(
    <Hello name="Guixue"></Hello>,
    document.getElementById("container")
);

编译并执行

  1. 安装 npm 包;
npm install
  1. 使用Babel编译 src 下的代码

或者直接执行 npm run build

babel src/index.jsx -o dist/index.js
babel src/Hello.jsx -o dist/Hello.js
  1. 使用 Webpack 打包代码

或者直接执行 npm run pack

webpack -d dist/index.js dist/all.js
  1. 启动Web Server

或者直接执行 npm run server

http-server

注: 以上内容 2-4 步骤,可以使用 npm run restart

总结

本文使用Babel编译JSX格式成功部署本地开发环境。但是,同时也带来了一个问题,步骤2的编译,如果项目中有很多文件,每个文件一条命令,肯定非常麻烦,有没有自动化的开发部署方案? 请关注系列文章《React 边写边学 3 使用Webpack自动化管理》

附:本文的参考的文档