建立合輯,將【碼上掘金】作為開源專案的demo庫使用

語言: CN / TW / HK

最近社群新推出了一個碼上掘金的產品,可以方便大家分享在瀏覽器中可以實時執行的程式碼了。而這個工具的價值還遠不止如此,我們可以利用它構建程式碼合輯,把它用到自己的開源專案中,為開源專案的使用者建立可參考的demo庫。

這麼做的好處有至少兩點,一是不必去費心找可以在專案中構建demo的工具,二是將來碼上掘金產品升級,會支援評論、點贊等社交功能,可以極大地方便開源專案作者與使用者進行交流。

那麼具體要怎麼做呢?

首先看一個例子:

https://collection.juejin.fun/?spritejs

上面這個地址是我為我的開源WebGL渲染庫SpriteJS寫的Demo,這些例子全部都放在了碼上掘金上,使用者只要訪問這裡就可以通過例子來了解SpriteJS的用法。

這個合輯功能目前不是碼上掘金本身的內建功能,而是決定把它作為開源出來提供給大家共建,這個專案本身整合在JCode-tools這個開源專案中。

如何建立自己的合輯

建立自己的合輯有兩個辦法,一個簡單的辦法是將程式碼釋出到碼上掘金之後,提交PR給JCode-tools,更新一個配置檔案到這裡:https://github.com/xitu/jcode-tools/tree/main/docs/collections

檔名為:你的專案名.jcoderc.js

這樣你就可以通過 https://collection.juejin.fun/?你的專案名 來訪問你的程式碼合輯了。

jcoderc檔案的寫法非常簡單,你可以參考 spritejs.jcoderc.js 來配置你自己的程式碼合輯。

如果你想要把合輯部署到你自己的專案裡,那麼可以用第二個辦法,首先在你的專案裡安裝 jcode-tools:

npm install jcode-tools

然後在專案目錄執行命令 jcode-tools/bin/doc.js 輸出目錄(預設為docs)

jcode-tools會在專案的目錄下建立一個文件目錄,預設為docs,裡面有四個檔案,分別是:

index.html index.js jcoderc.js style.css

你只需要修改jcoderc.js的配置項即可,然後通過本地執行http-server或者部署到 github pages,就可以創建出你自己的程式碼合輯了。

以上是碼上掘金的一個擴充套件用法,這個產品的潛力遠不止如何,我們也會不斷迭代,增加新的語言,增加社交功能,擴充套件新的用法,更多玩法也有待大家去發掘。

最後放一個有趣的WebGL效果:

https://code.juejin.cn/pen/7086704401011703816

大家用碼上掘金實現了哪些好玩的東西呢?歡迎在評論區交流。