Babel6：編譯 React jsx + ES6 簡單入門

簡介

Babel 是一個普遍使用的轉碼器，能夠將ES6代碼轉爲ES5代碼；而且還能夠支持React的JSX寫法。

---

安裝

請肯定你已經安裝好Nodejs
現階段在npm上下載的都是6.0以上版本，它和5.0版本的變化仍是很大的，這裏咱們用的是6.0的最新版

請先打開cmd/終端，全局安裝 babel-cli (命令行轉碼)

npm install -g babel-cli

而後進入項目根目錄，建立package.json

npm init --yes

而後在項目本地安裝

npm install --save-dev babel-cli babel-core babel-preset-es2015 babel-preset-react

---

配置

在項目根目錄下建立新文件「.babelrc」
該文件用來設置轉碼規則和插件，基本格式以下

{
  "presets": [],
  "plugins": []
}

presets字段設定轉碼規則。咱們安裝了babel-preset-es2015和babel-preset-react
前者是將ES6轉換爲ES5，後者是React的轉碼規則
將這2個規則寫入「.babelrc」中

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

---

編譯

在根目錄下建立2個文件夾。src是開發時文件的目錄，lib是執行編譯後輸出文件的目錄
├── lib
└── src

如今在src文件夾下建立一個test.js,這裏用ES6來寫React

class Test extends React.Component {
    render() {
        return (
            <h1>test</h1>
        );
    }
}
ReactDOM.render(<Test />, document.body);

這裏在cmd/終端執行語句 「babel 輸入目錄 -d 輸出目錄」

babel src -d lib

執行成功後lib文件夾下就會多出一個test.js

var Test = function (_React$Component) {
    _inherits(Test, _React$Component);

    function Test() {
        _classCallCheck(this, Test);
        return _possibleConstructorReturn(this, (Test.__proto__ || Object.getPrototypeOf(Test)).apply(this, arguments));
    }
    
    _createClass(Test, [{
        key: "render",
        value: function render() {
            return React.createElement(
                "h1",
                null,
                "test"
            );
        }
    }]);
    
    return Test;
}(React.Component);

ReactDOM.render(React.createElement(Test, null), document.body);

---

改寫package.json

在package.json中改寫scripts屬性

"scripts": {
    "babel": "babel src -d lib"
}

這時在cmd/終端運行

npm run babel

執行成功會發現與執行babel src -d lib效果是同樣的