我开源了一个能在浏览器上执行 npm 命令的在线代码编辑器🚩🚩🚩

时隔两个月,我又基本写好了一个开源项目,这次给大家带来的是一个在线代码编辑器。

在两个月前我发布了我的个人第一个项目 create-neat 脚手架,而这次的在线代码编辑器使用的构建工具就是基于这个脚手架搭建的。

首先先上地址:

Github 地址github.com/xun082/onli...

在线预览online-edit.wangblogs.top/

一、背景 📖

这个项目没什么特别的背景,首先就是好玩,其次就是好玩,再其次就是非常好玩。

二、技术栈 🧰

目前整个技术为纯前端,后期会添加后端,并且会实现在线协调编辑功能。

  • React 18
  • WebContainer
  • Typescript
  • Webpack

三、效果展示 🚩

当输入 URL 之后会看到如下界面:

首页的话功能点不多,还没有空写,只有一个逻辑处理,点击新建代码片段即可:

这里新建空白文档是直接打开编辑器,而 打开文件夹 则是选择本地文件,如下图所示:

选择特定文件之后会自动跳转到编辑页,如下图所示:

当进入到这个页面之后,你可以根据你要选择的项目,执行 npm 命令安装相对应的依赖包并运行起来,如下图所示:

以来安装完成之后,就可以启动项目了,执行项目中 package.json 中的启动命令 pnpm start:

效果成功展示。

考虑到一些本地项目自带 prettier,在设置这里提供了一个全局的 prettier 代码格式化和一个可选的 prettier 配置:

在这里你可以选择你的 prettier 配置文件所在的目录地址,如果不需要使用的话,你可以配置一些全局的 prettier 配置。

在这里还有一些就是文件的增删改操作:

还有一个就是你可以在终端里面执行 create-react-appcreate-vite 等脚手架工具,如下图所示:

项目创建成功,由于终端有点丑陋,还没有更改,暂时无法监听到什么时候命令执行完成,所以需要手动刷新一下文件目录:

哈哈,项目成功启动。

四、未来 📕

相关需求或者任务列表会在 issue 里面发布,感兴趣的朋友可以领取任务然后开发,我也会逐步完善 GitHub 上面的一些配置。

后期会逐步完善这些功能和 ui。

会逐步添加一些重大功能,例如:

  • 下载文件到本地
  • 关联 Github 仓库
  • 在线协调编辑
  • 等等......

靠着这个项目我是拿到了不少大厂的面试机会,虽然我菜并没有通过,但是这个项目会一直维护并且发扬光大的哈哈哈哈哈。并且会将这个项目作为毕业设计。

五、如何贡献 🍵

目前还没有说什么规范做到如何捐献,你想怎么捐献都可以,本人比较闲,看到没问题之后都会立即合并的。

如果你正在使用这个项目或者对这个项目感兴趣,可以通过以下方式支持我,这也是一种贡献的方式:

  • Star、Fork、Watch 一键三连 🚀🚀🚀

最后再贴一下项目地址:

Github 地址github.com/xun082/onli...

在线预览online-edit.wangblogs.top/

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
画月的亮2 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119402 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689975 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt