babel6 babel7_从JSXTransformer到Babel

babel6 babel7

As announced, starting with React v0.14 (next release), the JSXTransformer.js won't be part of the release. Also `react-tools` npm package is no more. So whatchagonnawannado is switch to Babel. Here's how.

正如宣布的那样，从React v0.14(下一个版本)开始，JSXTransformer.js不会成为该版本的一部分。 react-tools` npm软件包也不再存在。 所以whatchagonnawannado改用Babel。 这是如何做。

建立时转换 (Build-time transform)

Prerequisite: install Babel

先决条件：安装Babel

$ npm install --global babel

Where you previously had this as part of your development/build process:

您以前在开发/构建过程中拥有此功能的位置：

$ jsx --watch source/ build/

...now becomes

...现在变成

$ babel source/ --watch --out-dir build/

Easy-peasy!

十分简单！

浏览器内转换 (In-browser transform)

Required warning: in-browser transforms are just for testing and playing and prototyping. Never for live sites.

必需的警告：浏览器内转换仅用于测试，播放和原型制作。 从不用于实时网站。

Now with that out of the way, let's see how to switch to Babel.

现在解决了，让我们看看如何切换到Babel。

Prerequisite: a file called browser.js. You'll find in in your node_modules, e.g.

前提条件：一个名为browser.js的文件。 您可以在node_modules找到，例如

$ ls /usr/local/lib/node_modules/babel/node_modules/babel-core/browser.js

Slightly easier to find if you npm install babel-core:

如果您npm install babel-core稍微容易找到：

$ ls /usr/local/lib/node_modules/babel-core/browser.js 

Anyway, find browser.js and put it somewhere handy. Now where you used to have:

无论如何，找到browser.js并将其放在方便的位置。 现在您曾经拥有：

<script src="react/build/react.js"></script>
<script src="react/build/JSXTransformer.js"></script>

.. now you do:

.. 你现在做：

<script src="react/build/react.js"></script>
<script src="babel/browser.js"></script>

Finally, instead of the invalid type="text/jsx" you used to add to your script tags, now you do type="text/babel", like:

最后，现在不用type="text/jsx"来添加到script标签，而是使用type="text/babel" ，例如：

<script type="text/babel">
  React.render(
    <h1 id="my-heading">
      <span><em>Hell</em>o</span> world!
    </h1>,
    document.getElementById('app')
  );
</script>

那是所有人 (That's all folks)

Not too bad, eh? And the bonus: you get tons of ES6 (ECMAScript2015) features and beyond, just by adopting Babel. Enjoy!

还不错吧？ 好处是：您只需采用Babel，即可获得大量的ES6(ECMAScript2015)功能。 请享用！

For example directory structure and working examples with both Babel and JSXTransformer, navigate these waters.

例如，使用Babel和JSXTransformer的目录结构和工作示例，请浏览以下目录。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/from-jsxtransformer-to-babel/

babel6 babel7