JSX(v3.0.0-alpha.11)

Eleventy 简称	文件扩展名	npm 包
`11ty.jsx`	`.11ty.jsx`	`tsx`
`11ty.tsx`	`.11ty.tsx`	`tsx`

相关语言：TypeScript、JavaScript、MDX、Custom
JSX 文件中不支持前置内容。请改用 data 导出。

JSX 需要 ESM（与 Eleventy 一起使用时，更多信息请阅读问题 #3304）。这意味着您的项目 package.json 必须包含 "type": "module" 或您的配置文件必须使用 .mjs 文件扩展名，例如 eleventy.config.mjs。

配置

这里我们使用 tsx 来处理 JSX 文件。

eleventy.config.js

import "tsx/esm";
import { renderToStaticMarkup } from "react-dom/server";

export default function (eleventyConfig) {
// 我们也可以同时添加对 TypeScript 的支持：
eleventyConfig.addExtension(["11ty.jsx", "11ty.ts", "11ty.tsx"], {
key: "11ty.js",
compile: function () {
return async function (data) {
let content = await this.defaultRenderer(data);
return renderToStaticMarkup(content);
};
},
});
}

现在运行 Eleventy 并告诉它处理 11ty.jsx 和 11ty.tsx 文件：

npx @11ty/eleventy --formats=11ty.jsx,11ty.tsx

或者，您可以将 eleventyConfig.addTemplateFormats("11ty.jsx,11ty.tsx") 添加到您的配置文件中。

社区贡献

使用 `esbuild-register`

如果您想要一个适用于 CommonJS 和 Eleventy 2.0 的方法，您可以将 esbuild-register 与 Eleventy 一起使用（使用与 11ty.js 模板相同的约定）。查看 @pspeter3 在 GitHub 上的这个 gist 或 @danielrob 的这个 GitHub 评论。

您的配置文件可能如下所示：

Filename eleventy.config.js (CommonJS)

const { register } = require("esbuild-register/dist/node");

register();

module.exports = function(eleventyConfig) {
// 我们也可以同时添加对 TypeScript 的支持：
eleventyConfig.addExtension(["11ty.jsx", "11ty.ts", "11ty.tsx"], {
key: "11ty.js",
});
};

现在运行 Eleventy 并告诉它处理 11ty.jsx 和 11ty.tsx 文件：

npx @11ty/eleventy --formats=11ty.jsx,11ty.tsx

JSX(v3.0.0-alpha.11)

配置

社区贡献

使用 esbuild-register

其他页面在 JavaScript

使用 `esbuild-register`