🚀 TSX动态编译的黑科技，快如闪电！

今天想和大家分享一个我开发的小工具dctc，它能让TSX文件的编译和执行变得更加简单高效。虽然不是什么革命性的工具，但在某些场景下可能会帮到你。

🔍 这玩意儿是啥？

dctc是一个轻量级的命令行工具，专注于将TypeScript和JSX文件快速编译为可执行代码。它基于esbuild实现高效编译（虽然vite版本目前被注释），希望能为开发者提供一些便利。

🛠️ 它能干啥？

高效编译 ：利用esbuild实现快速的TSX到JS转换
即时执行：编译后可直接执行，简化开发流程
React支持：内置React和React-DOM，方便组件开发
简洁CLI：通过简单命令即可完成所有操作

🎯 适用场景

快速预览React组件
生成HTML邮件模板
临时执行TSX脚本
教学演示React组件

⚙️ 技术实现

编译模块 (complie_es.js)
- 基于esbuild实现高效编译
- 完整支持TypeScript和JSX语法
- 输出CommonJS格式代码
执行模块 (execute.js)
- 使用Node.js的vm模块创建安全沙箱
- 提供完整的Node.js环境上下文
- 完善的错误处理和日志输出机制
CLI接口 (bin/index.js)
- 参数解析和验证功能
- 版本和帮助信息展示
- 文件路径检查功能

🚴 快速体验

安装

bash 复制代码

npm install -g dctc

写个TSX文件

tsx 复制代码

// hello.tsx
import React from 'react';

const App = () => {
  return <h1>Hello, dctc!</h1>;
};

export default App;

执行

bash 复制代码

dctc hello.tsx

🎨 高级用法

项目还支持更复杂的场景，比如生成HTML模板：

tsx 复制代码

// email-template.tsx
import { renderToString } from 'react-dom/server';
import React from 'react';

const EmailTemplate = () => (
  <div style={{ fontFamily: 'Arial' }}>
    <h1>欢迎订阅我们的服务</h1>
    <p>感谢您选择我们！</p>
  </div>
);

const html = renderToString(<EmailTemplate />);
console.log(html);

🤔 为什么选择dctc？

速度快：相比传统TypeScript编译器，esbuild的编译速度提升10倍以上
轻量级：没有复杂的配置，开箱即用
灵活：既可以在开发时使用，也可以集成到构建流程中

🏁 结语

dctc就像是你工具箱里的瑞士军刀，简单却强大。无论是快速原型开发，还是临时脚本执行，它都能完美胜任。项目代码简洁优雅！

GitHub地址：github.com/SteamedBrea...