《React+Redux前端開發實戰》—1.4.2 JSX的轉譯

1.4.2? JSX的轉譯

JSX代碼是不能被瀏覽器直接運行的，需要將其轉譯為javaScript之后才能運行。轉譯之后的代碼功能相同。由于前端發展速度較快，在很多老項目中依舊可以見到這類寫法。這也是本節對JSX編譯工具發展作一個簡單介紹的初衷，初次學習React的讀者暫時可以當成小故事去閱讀。下面來看一看對JSX轉譯的一段小“歷史”。

早期Facebook提供了一個簡單的工具JSXTransformer，這是一個瀏覽器端具有轉譯功能的腳本，將這個JSXTransformer.js文件直接引入HTML文檔就能使用。例如：

// type為text/jsx

這樣寫就需要在瀏覽器端進行轉譯工作，所以對性能有損耗，影響效率。當然Facebook也考慮到了這點，于是對應的也就有了服務端去渲染的工具，那就是react-tools。這里暫不介紹，讀者先大致了解下即可。

隨后在React v 0.14之后官方發布：

Deprecation of react-tools

The react-tools package and JSXTransformer.js browser file have been deprecated. You can continue using version 0.13.3 of both, but we no longer support them and recommend migrating to Babel, which has built-in support for React and JSX.

也就是說，在React v0.14版本后將JSXTransformer.js棄用了。接下去可以使用Babel，如圖1.7所示，這也是當下主流使用的轉譯工具。

圖1.7? Babel界面

Babel原名是6to5，是一個開源的轉譯工具。它的作用就是把當前項目中使用的ES 6、ES 7和JSX等語法，轉譯為當下可以執行的javaScript版本，讓瀏覽器能夠識別。簡單來說，它是一個轉碼工具集，包含各種各樣的插件。

在Babel 6.0版本以前，使用了browser.js，也就是最早替代JSXTransform.js的轉化器腳本。在HTML中引用如下：

// type為text/babel

注意：在Babel 6.0之后就不再提供browser.js了，當然老項目中依舊可以這樣使用。不過這種寫法在大型項目中通常不會使用，畢竟在瀏覽器中隔了一道轉譯層。如果只是想做一個本地的小demo，還是可以直接引用在瀏覽器端做轉譯的。

Babel還提供了在線編譯的功能（http://babeljs.io/repl/），如圖1.8所示，可以在上面進行測試或學習。

圖1.8? Babel在線編譯界面

以上就是JSX轉譯的大致歷程。

本書之后的項目，將使用Webpack等構建工具配置Babel，以實現對JSX語法的支持。

web前端 React Redux

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。