《React+Redux前端开发实战》—1.4.2 JSX的转译

1.4.2  JSX的转译

　　JSX代码是不能被浏览器直接运行的，需要将其转译为JavaScript之后才能运行。转译之后的代码功能相同。由于前端发展速度较快，在很多老项目中依旧可以见到这类写法。这也是本节对JSX编译工具发展作一个简单介绍的初衷，初次学习React的读者暂时可以当成小故事去阅读。下面来看一看对JSX转译的一段小“历史”。

　　早期Facebook提供了一个简单的工具JSXTransformer，这是一个浏览器端具有转译功能的脚本，将这个JSXTransformer.js文件直接引入HTML文档就能使用。例如：

　　<script src="./jsxtransformer.js"></script>

　　// type为text/jsx

　　<script type="text/jsx">

　　 // JSX代码

　　</script>

　　这样写就需要在浏览器端进行转译工作，所以对性能有损耗，影响效率。当然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中引用如下：

　　<script src="./babel-core/browser.js"></script>

　　// type为text/babel

　　<script type="text/babel">

　　 // JSX代码

　　</script>

注意：在Babel 6.0之后就不再提供browser.js了，当然老项目中依旧可以这样使用。不过这种写法在大型项目中通常不会使用，毕竟在浏览器中隔了一道转译层。如果只是想做一个本地的小demo，还是可以直接引用在浏览器端做转译的。

　　Babel还提供了在线编译的功能（http://babeljs.io/repl/），如图1.8所示，可以在上面进行测试或学习。

图1.8  Babel在线编译界面

　　以上就是JSX转译的大致历程。

　　本书之后的项目，将使用Webpack等构建工具配置Babel，以实现对JSX语法的支持。