Question

我有一组“大多数JSX”文件，如果被解释为直接的JSX包含非法语法。我还有一组（同步）函数可以采用这种“大多数”JSX语法并将其转换为正确的JSX语法。这些函数目前用作webpack加载器，以确保在webpack将数据传递给babel时，它是正确的JSX。

作为一个例子，这些函数改变了以下“几乎JSX”（它具有JSX冲突的LaTeX代码，以及<pre>块中的JSX冲突语法：

module.exports = require('react').createClass({
  ...,
  render: function() {
    return (
    <div>
      <h1>An example component</h1>

      <p>With latex:</p>

      <p>\[ \begin{align}
        f(t) &= t \cdot \sqrt{t} \\
        &= t^{1.5}, 0 \leq t \leq \inf
      \end{align}\]</p>

      <p>code:</p>

      <pre>function(t) {
  if (t<0) 
    return undefined;
  return Math.pow(t, 1.5);
}</pre>
    </div>);
  },
  ...
});

进入下面的“实际JSX”：

module.exports = require('react').createClass({
  render: function() {
    return (<div>
      <h1>An example component</h1>

      <p>With latex:</p>

      <p><img src="images/latex/fhqo89732hf98o3h4f3.svg"/></p>

      <p>code:</p>

      <pre>function(t) {{'\n'}
  if (t&lt;0){'\n'}
    return undefined;{'\n'}
  return Math.pow(t, 1.5);{'\n'}
}</pre>
    </div>);
  }
});

运行这些函数后，LaTeX已被解析并替换为其相应静态资产图像的链接，因此不再存在JSX语法冲突，并且<pre>元素已替换任何冲突的字符使用JSX安全的html实体，并且为了保留换行符（因为缩小是白色空间的敌人），在每一行的末尾都给出了明确的换行符。

但是，为了使用Node.js进行一些服务器端页面生成，我需要babel-register以便Node可以“本地”加载JSX文件，但这是一个问题，因为它会看到大多数-JSX语法和抛出错误。

作为基本测试脚本，我使用以下代码：

// register native JSX
require("babel-register")({
  // this is not sufficient to load "almost JSX" files
  // with data that needs to be preprocessed out, first.
});

var React = require('react');
var ReactDOM = require('react-dom');

var ReactRouter = require('react-router'); // v1.0
var RoutingContext = ReactRouter.RoutingContext;
var RouteMap = require('../lib/site/routemap');
var routes = RouteMap.routes;
var paths = RouteMap.paths;

var fs = require('fs-extra');
paths.forEach(path => {
  ReactRouter.match({ routes, location: path }, (err, _, renderProps) => {
    var data = ReactDOM.renderToString(<RoutingContext {...renderProps} />);
    fs.writeFile(`./static/pages/${url}.html`, data, 'utf-8');
  });
});

对于干净的JSX文件，这没有任何问题，但对于需要预处理的文件，这会导致Babel抛出终端错误。所以：

有没有办法让babel-register对要求加载节点的文件运行预处理器进行require(...)调用？

我已经阅读了babel文档，但我似乎无法找到有关预处理的任何部分;有插件，但是在 Babel已经将文件解析为AST之后，中出现了这些插件，并且几乎JSX语法在尝试构建AST时使Babel出错。

或者，有没有办法挂钩到Node自己的文件加载器，这样如果要求它加载js / jsx文件，我可以先运行我的预处理器然后告诉node传递转换后的文件处理这些文件类型的人（在这种情况下是babel）？

Answer 1

我认为你可以通过在Babel之前设置你自己的需求钩子来做到这一点。我要看一下Pirates，我认为这是为了更容易设置需要的钩子，这些钩子可以与设置需要挂钩的其他模块互操作。那是proposal to use it in Babel。它的README给出了如何设置一个＆＃34;手动＆＃34;的说明。也许它可用于设置您需要的内容，或者只是README中的插图将证明是有用的。

如何将预处理器绑定到babel-register，以便在babel开始

1 个答案: