Is there a way to use JSX in my native CommonJS environment?

Question

I am starting a new project in an environment with built-in CommonJS support for modules require- this is a project with an atomic shell, there is no way to use pre-compilation steps, such as in Browserify or webpack AFAIK.

I can use JSX in my app.jsxentry point file declared on mine index.htmlbecause it JSXTransformerwas declared earlier:

<script src="scripts/vendor/JSXTransformer.js"></script>
<script type="text/jsx" src="scripts/app.jsx"></script>

I want to use JSX syntax for helper modules that are imported as CommonJS modules inside my module app.jsx:

// This raises an Error, the XML-like tags are not supported
var Grid = require('./scripts/grid.jsx');

As far as I understand, I would have to abandon the JSX syntax and go with the vanilla syntax for any module that loads through require. Are there alternatives to using JSX in this situation?

Answer 1

[Update]

Now that the JSX transformer is deprecated in favor of Babel , you can use Babel requires a hook to support JSX in an environment like CommonJS:

Using

require("babel/register");

All the following files are required node extensions .es6, .es, .jsxand .jswill be converted Babel. polyfill is also required.

. node_modules, . , ignore :

require("babel/register")({
  // This will override `node_modules` ignoring - you can alternatively pass
  // an array of strings to be explicitly matched or a regex / glob
  ignore: false
});

[ ]

Node.js(, -), node-jsx:

require('node-jsx').install()
require("./myComponent.js");

.jsx, :

require('node-jsx').install({extension: '.jsx'})
require("./myComponent.jsx");

Answer 2

:

cp -R src dist

jsx react-tools

jsx -x jsx dist dist

jsx

find dist -iname '*.jsx' | xargs rm

---

, , , .