react 入門-Babel

很多電腦語言在啟動並執行時候，需要把我們編寫的原始碼編譯成電腦底層的語言；

而javascript是解釋型語言，瀏覽器接收javascript文本，然後再解釋執行，所以在編寫javascript代碼之後，瀏覽器可以直接識別這些文本，不需要再編譯javascript文本。

但是，隨著javascript的不斷更新和版本升級，新的文法和特性越來越多。這些文法提供了更好的效能、編程體驗和開發風格，瀏覽器對這些新的文法和特性的跟隨是非常滯後的，也就是說，新的javascript的特性無法直接使用。

這就是 babel 出現的背景。

javascript的版本包括ES3、ES5、ES6還有ES7，不是所有的瀏覽器都支援所有的這些版本。

為了能讓開發人員在新版本的javascript出現後，使用最新的javascript版本，babel 出現了。

babel 允許開發人員使用最新的javascript版本和新文法開發應用。它可以把最新的文法轉換成當前所有瀏覽器都可以支援的文法。

比如，現在可以使用ES6甚至ES7的新文法，當然還有 React JSX的文法進行編程，使用 babel 將這些文法轉換成當前瀏覽器都可以支援的 ES5 的文法。

上篇文章中是在瀏覽器直接引用babel：

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

然後，將JSX的javascript代碼寫在 type 為 text/babel 的script標籤內：

<script type="text/babel">function formatName(user) {  return user.firstName + ' ' + user.lastName;}const user = {  firstName: 'Harper',  lastName: 'Perez'};const element = (  <h1>    Hello, {formatName(user)}!  </h1>);ReactDOM.render(  element,  document.getElementById('root'));</script>

產品模式下，不適合使用這種方法。

babel 還可以在 webpack 等工具中以 loader 的方式提供轉換。