🚀 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)

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

🚴 快速体验

安装

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?

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

🏁 结语

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

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

相关推荐
web打印社区1 天前
如何在 Vue 中打印页面:直接用 web-print-pdf(npm 包)
前端·vue.js·pdf
web打印社区1 天前
最简单的 Web 打印方案:用 5 分钟上手 web-print-pdf(npm 包)
前端·pdf·npm
转转技术团队1 天前
AI在前后端联调提效的实践
前端·后端
UrbanJazzerati1 天前
使用Mockoon快速搭建Mock API:从入门到实战
前端·面试
林太白1 天前
NestJS-身份验证JWT的使用以及登录注册
前端·后端·前端框架
Cache技术分享1 天前
200. Java 异常 - Throwing Exceptions: 指定方法抛出的异常
前端·后端
Mintopia1 天前
🚀 cesium-kit:让 Cesium 开发像写 UI 组件一样简单
前端·前端框架·cesium
我的写法有点潮1 天前
简单轻便的四个CSS动画库
前端·css·vue.js
瞎捣鼓1 天前
深入理解 JavaScript 函数参数传递:从值传递到纯函数实践
前端
六月的可乐1 天前
探索AI在线前端html编辑器IDE
前端·html·ai编程