如何把 JSX 当作 HTML 代码生成器

在不使用 React 做单页面应用的情况下，利用 JSX 生成 HTML 代码，可以享受到 React 组件化的好处。

1. 转换 JSX 文件成 HTML 文件的脚本（此处假设脚本的路径是 build\scripts\jsx-to-html.js）

"use strict";

// 此处引用的 jsx-render-to-html 库已经发布到 npm 仓库
var jsxRenderToHtml = require('jsx-render-to-html');
var path = require('path');

var runArgs = process.argv;

if (runArgs != null && runArgs.length > 2) {
  // 获取启动参数中 JSX 文件路径
  var jsxPath = runArgs[2];

  var basePath = path.dirname(jsxPath);
  var jsxName = path.basename(jsxPath);
  var htmlName = jsxName.substring(0, (jsxName.length - 4)) + '.html';
  var htmlPath = path.join(basePath, htmlName);

  // 渲染 JSX 文件成 HTML 文件
  jsxRenderToHtml(jsxPath, htmlPath);
  console.info('Success to write file "' + htmlPath + '".');
}

2. 修改 VSCode 的 launch.json 文件（暂未研究如何配置其它 IDE）

效果是在点击 "Run AND Debug" 时调用 jsx-to-html.js 脚本去转换当前打开的 jsx 文件

{
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "JSX Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\build\\scripts\\jsx-to-html.js",
      "args": ["${file}"]
    }
  ]
}

在上述步骤都完成后点击运行后就会自动转换成 JSX 文件

example1.html 文件是通过 example1.jsx 文件生成出来