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

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

🔍 这玩意儿是啥？

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

🛠️ 它能干啥？

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

🎯 适用场景

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

⚙️ 技术实现

1. 编译模块 (complie_es.js)

   • 基于esbuild实现高效编译
   • 完整支持TypeScript和JSX语法
   • 输出CommonJS格式代码

2. 执行模块 (execute.js)

   • 使用Node.js的vm模块创建安全沙箱
   • 提供完整的Node.js环境上下文
   • 完善的错误处理和日志输出机制

3. CLI接口 (bin/index.js)

   • 参数解析和验证功能
   • 版本和帮助信息展示
   • 文件路径检查功能

🚴 快速体验

安装

npm install -g dctc

写个TSX文件

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

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

export default App;

执行

dctc hello.tsx

🎨 高级用法

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

// 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？

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

🏁 结语

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

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