NakedJSX 是一个命令行工具,用于从 JSX 生成 HTML 文件。输出是纯 HTML 和 CSS - 除非您选择添加自己的 JavaScript。
通过运行 npx 命令从 JSX 生成静态 HTML 文件。Scoped CSS 类是从 JSX 中提取并进行去重的。
无需置 Node.js 项目,只需在 NakedJSX 内容目录上运行 npx 命令,您的站点就会构建到输出文件夹中。
包括具有实时刷新构建和 Web 服务器的开发模式。
NakedJSX 提供了一个可选的小型运行时,允许客户端 JavaScript 使用 JSX。如果需要,运行时会自动注入,并向文件添加大约 0.5 KB。
演示:
如果你安装了 Node.js,你现在可以试试 NakedJSX。创建一个名为src以下文件的目录(文件名必须以 结尾-page.jsx):src/index-page.jsx
import { Page } from '@nakedjsx/core/page'
const BodyContent =
({ title }) =>
<>
<h1 css="color: fuchsia">{title}</h1>
<p css="color: #ff00ff">
Building HTML files from JSX feels right.
</p>
</>
Page.Create('en');
Page.AppendCss('body { font-family: sans-serif }');
Page.AppendHead(<title>Hello NakedJSX</title>);
Page.AppendBody(<BodyContent title="Hello NakedJSX" />);
Page.Render();然后在终端中打开父目录并运行:
# 构建命令
$ npx nakedjsx src --out out --pretty
结果是一个名为 的新子目录out,其中包含一个 HTML 文件:out/index.html(342 字节)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello NakedJSX</title>
<style>
body {
font-family: sans-serif
}
.a {
color: #f0f
}
</style>
</head>
<body>
<h1 class="a">Hello NakedJSX</h1>
<p class="a">Building HTML files from JSX feels right.</p>
</body>
</html>
请注意,scoped CSS 是从 JSX 中提取的,经过缩小,然后进行了去重。
官网:https://nakedjsx.org/
网友回复
有没有不依赖embedding向量的RAG技术?
有没有支持实时打断语音通话并后台帮你执行任何的ai模型?
开源ai大模型文件格式GGUF、MLX、Safetensors、 ONNX 有什么区别?
出海挣钱支付收款PayPal、Wise 、PingPong、Stripe如何选择?
如何实现类似google的图片隐形水印添加和识别技术?
linux上如何运行任意windows程序?
ai能写出比黑客还厉害的零日漏洞等攻击工具攻击任意软件系统工程?
js如何获取浏览器的音频上下文指纹、Canvas指纹、WebGL渲染特征?
为啥ai开始抛弃markdown文本,重新偏好html文本了?
网站有没有办法鉴别访问请求是由ai操控chrome-devtools-mcp发出的?


