乐趣区

关于后端:在线代码编辑与分享工具

jiezi

分享一些最近看到的在线编辑和部署的工具

在线编辑器

之前看 React 新官网发现有个 codesandbox, 发现其性能很弱小，于是尝试寻找了其余竞品并做个介绍

codesandbox

官网介绍的性能很多, 说简略点是一个在线编辑器，同时能够分享给其他人 review, 还能够进行部署我的项目，能够装置一些包。

  1. 咱们的开发工具容许你创立快捷方式来运行任何命令，包含在启动、文件更改或点击时。

    创立标准化的开发容器，主动实现启动开发服务器、lint、build、终端、数据库服务器等工作。

  2. CodeSandbox 使每个分支和拉取申请都在 URL 前面的弱小云环境中运行。在外部，所有都通过了预配置，并在预览的同时运行。运行测试，查看代码，而后点击提交更改。
  3. CodeSandbox 在一个弱小的云环境中放弃每个分支和拉动申请的运行，在一个 URL 前面。在外面，所有货色都是事后配置好的，并与预览版一起运行。运行测试，审查代码，并通过点击提交更改。
  4. CodeSandbox 使你的代码在一个疾速的微虚拟机上运行，在两秒钟内启动任何开发环境。简直能够运行任何货色并从任何设施上拜访它。任何在本地运行的货色都能够在 CodeSandbox 上运行。

  5. 让每个人都能预览你的代码，审查它并间接在你的代码库上发表评论。

    通过像 inspect 这样的低代码工具，任何人都能够轻松地进行批改，并通过点击提交。

  6. 轻松地增加服务器，并为每个拉动申请和每个分支配置一个独特的数据库。

    这意味着在切换分支时不再有迁徙或回滚的麻烦。

  7. 享受在云中运行你的代码和加强合作的力量，以及 VS Code 扩大、键盘绑定和主题的生产力劣势。

能够说，像 codepen 或者 jsfiddle 这种在线编辑器还是无奈跟 Codesandbox 相比的，然而如果你只须要简略的在线写点代码并分享那么 CodePen 曾经够了。

不过以上三种工具都对前端的货色反对更好，其中 JSFiddle 我当初拜访都用不了。

CodePen

CodePen: Online Code Editor and Front End Web Developer Community

也是在线代码编辑器，写 CSS 的比拟多，也能够用于分享代码

代码片段分享

以下是 ChatGpt 的答复

Pastie

Pastie

<img src=”https://s2.loli.net/2023/05/21/oF9kGtX6LzabOUd.png” alt=”image-20230521211746945″ style=”zoom:67%;” />

反对以上格局，然而编辑代码时并不反对补全这些性能，看起来是用来把本地曾经写好的代码放上去保留后生成链接发给他人的，比方上面的代码片段，不过工夫只有 24h.

Pastebin

Pastebin.com

跟下面的相似，然而须要注册一下，性能更多.

<img src=”https://s2.loli.net/2023/05/21/7VN8H2vyWpRB1Uq.png” alt=”image-20230521212638787″ style=”zoom:50%;” />

Github Gists

Create a new Gist (github.com) 创立 Gists

drowning-in-codes’s gists (github.com) 集体的 Gists

我集体举荐应用 Github Gists, 上面依照官网文档给一些介绍。

你能够创立两种清单：公开和机密。如果你筹备好与世界分享你的想法，就创立一个公开的要点，如果你不筹备，就创立一个机密的要点，说白了私密无奈被搜索引擎找到，然而也能够通过分享 URL 给他人。

创立好后还能够利用 url 或者 html 嵌入来分享,

<script src=”https://gist.github.com/drowning-in-codes/88f00a06346f90bfe88d9d72aa09690d.js”></script>

你也能够看看他人分享的代码 Discover gists (github.com)

也能够进行搜寻 Search (github.com)

能够在一些本地 IDE 上装置插件间接通过 Github Gist 分享代码

在线部署

Vercel

<img src=”https://s2.loli.net/2023/05/21/JvcgZEXyV3po1GI.png” alt=”image-20230521231004789″ style=”zoom:50%;” />

能够部署动态博客以及一些接口

Netlify

次要用于部署网站

跟 Vercel 相似, 然而目前 Vercel 风头正盛

GitHub Pages

Github 的, 也能够用来部署动态网站

GitHub Pages 是一项动态站点托管服务，它间接从 GitHub 上的仓库获取 HTML、CSS 和 JavaScript 文件，（可选）通过构建过程运行文件，而后公布网站。能够在 GitHub Pages 示例汇合中看到 GitHub Pages 站点的示例。

你能够在 GitHub 的 github.io 域或本人的自定义域上托管站点。无关详细信息，请参阅“配置 GitHub Pages 站点的自定义域”。

你能够创立在 Internet 上公开可用的 GitHub Pages 站点。应用 GitHub Enterprise Cloud 的组织还能够通过治理对站点的访问控制来私下公布站点。无关详细信息，请参阅 GitHub Enterprise Cloud 文档中的“更改 GitHub Pages 站点的可见性”。

Render

能够用来部署 nodejs 服务

Heroku

跟上者相似，但貌似发表付费了

总结

在线编辑器举荐 Codesandbox, 代码片段举荐 Github Gists, 在线部署应用 Vercel 和 Render。像 Vercel,Netlify,Github Page 这种适宜搭建网站或全栈 App, 后者 Render 能够间接

如果只是想要简略的分享下代码 Pastie 即可。

本文由 mdnice 多平台公布

退出移动版