在线编译器？看我用一周时间手撸一个，还是自己的用着爽啊！

科码小白
170 阅读6分钟

YIDE

English 🌏 / 简体中文

:point_right: 一款轻量型的在线前端编译器:cupid: :point_left:

Githu地址：仓库地址 线上版本：YIDE在线地址

文档持续完善中......

GitHub Repo stars GitHub commit activity GitHub package.json version GitHub License GitHub language count

介绍 :star2:

项目登录页 项目主图

  • YIDE是一款支持在线编写前端代码的编辑器，以React和Typescript为前端，以Egg.js和Mysql为后端，支持html、js、css和markdown编译，非常适合验证想法，实践操作和整理文档。

  • 本项目相比于当前一些在线编译器有以下特点：

    • 支持用户区分，用户可拥有独立的文件管理空间
    • 支持自定义脚本和样式文件
    • 支持Markdown文件书写和编译

  • 开发此项目的初衷主要是两点：

    • 一是经常问GPT写一些样式，但是不能及时查看到效果，干脆直接手撸一个自己的在线查看器，后面做着做着完善了一些功能
    • 二是增加一下自己的项目经历

特点 :boom:

  • :file_folder: 文件管理：支持区分用户和文件存储，目前仅支持新文件创建，相比于其他在线平台，支持选择编译的主文件如html和md文件。

  • :cat: 效率编辑：集成进来的Monaco-Editor，支持语言识别，代码补全以及高亮，支持一系列快捷键，如一键保存编译和格式化代码。

  • :penguin: 窗口拖动：主要页面布局是文件区Explorer，编辑器Editor和展示区Viewer，支持各栏“自由”拖动。

  • :panda_face: 多类型文件编译：支持html结合样式文件和脚本文件，支持Markdown格式文件编译。

  • :monkey: 自由化：编写html文件支持自动引入默认的脚本文件和样式文件，也可自定义脚本文件和样式文件，具体查看使用文档。

  • :dog: 内置图床：Markdwon支持图像上传，内置OSS图床。

使用文档 :iphone:

  • 创建新文件

在主页的左侧文件索引区Explorer创建新建文件，支持html，css，js，md为后缀的文件，其中html和md是可编译执行的文件。

默认文件：index.html，script.js，style.css 是默认文件，默认文件不允许删除。

自行创建的文件名不建议包含index，style和script字眼。

  • 编辑文件

在主页的中间区域是文件编辑区Editor，中间展示的当前文件名，可调节编辑区内的字体大小，选择编译文件（html/md），点击编译按钮则会自动保存所有未保存的文件然后编译，点击保存按钮会保存当前文件。

  1. html编辑

html文件不需要标准模板，只需要书写主要结构即可

<div>
    <h1 style="color: #eb7806">Welcome to YIDE</h1>
    <h3 style="color: #eb7806">by waiterxiaoyy</h3>
</div>
  1. css编辑

css编辑如下

body {
    color: #e56e0c;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}
  1. js编辑

js编辑如下

document.addEventListener('DOMContentLoaded', function () { 
    console.log('JavaScript loaded for YIDE'); 
});
  1. Md编辑

Md文件编辑支持常规的基础操作，暂不支持复杂的样式如类图、流程图。

  • 文件编译

文件编译目前仅支持html和md文件编译，后续集成查看TODO List。

  1. html编译

html会由后台自动解析出合格的代码，同时会解析style.css和script.js中的代码，由后台组合成一套完整的页面代码返回前台展示。

如果需要自定义样式文件和脚本文件，需要在html文件中加入下面两行：

<!-- 取消引入默认样式和脚本 -->
// no style.css
// no script.js

这两行代码需要严格按照上述格式写在需要自定义的html文件中，后台会识别并且取消加入默认的样式和脚本文件，用户自定义文件引入如下：

<!-- 取消引入默认样式和脚本 -->
// no style.css
// no script.js

<!-- 引入样式文件 -->
<link rel="stylesheet" href="/my.css" />

<!-- 引入脚本文件 -->
<script type="text/script" src="/my.js" ></script>

<div>
    <h1 style="color: #eb7806">Welcome to YIDE</h1>
    <h3 style="color: #eb7806">by waiterxiaoyy</h3>
</div>

注意： 引入自定义文件需以斜杠/开头，否则将不能识别用户下的文件。

当然，如果不需要引入文件，也可以直接在html文件的<style></style>和<script></script>中书写样式和脚本操作。

  1. Md编译

Md编译结合的是掘金论坛主题，暂时不支持更换主题。

  • 下载文件

在文件索引区和编辑区都支持下载文件，点击下载按钮即可。

  • 上传文件

暂不支持上传

  • 文件重命名

暂不支持，后续更新

安装/配置 :wrench:

  • 克隆项目
git clone git@github.com:waiterxiaoyy/YIDE.git
  • 项目结构
YIDE
├── YIDE-Egg-Server
├── YIDE-React-Client

YIDE-Egg-Server是以Egg.js和mysql为技术栈的后端项目，YIDE-React-Client是以React为技术栈的前端项目，两个需同时启动才能正常使用

  • 全局安装yarn

项目启动和部署需要node环境，请先提前安装好环境，项目中使用的node版本为v18.18.1，下面操作都基于此版本，如有不一致，请安装nvm切换到相应的node版本，安装nvm请自行查阅相关资料。

npm install -g yarn
  • 前端项目YIDE-React-Client配置/启动
  1. 安装依赖
cd YIDE-React-Client

// 安装依赖
yarn
  1. 配置端口

在vite.config.js和vite.config.ts中配置项目端口和代理转发，默认的前端端口是3001，后端的端口是8000

  1. 启动项目
// 开发环境下启动项目
yarn dev
  • 后端项目YIDE-Egg-Server配置/启动
  1. 安装和配置MySQL

后端需要提前安装好MySQL，自行查阅资料安装，版本8.0以上。

安装好后需要配置用户名和密码。

  1. 项目中配置MySQL

在YIDE-Egg-Server/config的config.default.js中配置mysql项和sequelize项，密码和数据库改成你自己设置的。

config.mysql = {
    app: true,
    agent: false,
    client: {
        host: 'localhost',
        port: '3306',
        user: 'root',
        password: '',
        database: 'yide'
    }
};

config.sequelize = {
    dialect: 'mysql',
    host: 'localhost',
    port: '3306',
    user: 'root',
    password: '',
    database: 'yide',
    define: {
        timestamps: false,
        freezeTableName: true
    }
};
  1. 执行sql语句导入表和基础数据

在项目目录下有app.sql文件，将里面的代码全部复制到MySQL控制台执行。

  1. 安装依赖

在目录YIDE-Egg-Server下

yarn
  1. 配置oss服务（可选）

由于项目中用到了图床，使用的是oss云服务，所以需要配置oss，否则图床会无法使用。

在config.default.js中配置oss项，region、accessKeyId、accessKeySecret、bucket是在oss申请时得到的，具体的oss服务开通请自行查阅资料。

config.oss = {
    client: {
        region: '',
        accessKeyId: '',
        accessKeySecret: '',
        bucket: ''
    }
};
  1. 启动项目

启动项目后，项目将在暴露在8000端口下

yarn dev
  • 项目部署

服务器使用docker进行管理项目，前端项目使用nginx部署，后端打包成镜像启动即可。

部署疑问欢迎添加微信交流：zhouyiyang0328

更新日志 📅

查看 [更新日志] (github.com/waiterxiaoy…) 获取最新更新情况。

TODO List 📋

如果想参与进来，欢迎提交PR成为项目贡献者，一起打造更加轻量和好用的在线IDE。

  • 页面布局优化：索引区缩进、响应式适配
  • 文件上传功能
  • 支持更多文件类型编译：vue、react等
  • 集成控制台
  • 文件重命名
  • 创建目录，目录管理，目录树
  • 代码分享

贡献者 🤝

欢迎贡献！请随时提交拉取请求。

这个项目的存在感谢所有贡献者：

许可证 📄

此项目根据 MIT 许可证授权 - 有关详细信息，请参阅 LICENSE 文件。

期待支持 💖

如果你发现此项目对你有所帮助，请考虑在 GitHub 上给它一个⭐️ !

avatar
文章
阅读
粉丝