mkdoc | Go 工具编译编译到 wasm

起因

前段时间写了个 API 文档生成工具mkdoc,因为并没有像 swag-go 一样依赖 go CLI 后来就在想能不能把他编译到 wasm 然后放到网页上,这样就能方便大家 0 部署就能对他有个了解。

成果

? 在线体验 ?

  • ( :

如果你对mkdoc感兴趣,欢迎 fork&star

一些问题

  1. 工具里用到了文件系统,go 提供的 wasm_exec.js 中没有实现文件系统
  2. 用到了 os.Getwd 系统调用,syscall/js 没有直接支持
  3. 一些 go 和 js 之间的交互问题

解决

文件系统

在 wasm_exec.js 中可以看到一个未实现的 node fs API,那我们只要在浏览器中按照 node fs API实现一个memory filesystem,就能解决文件系统的问题。

但是自己去造轮子太麻烦,找来找去找到了memfs这个库(给作者点 100 个?)。有了 memfs,我按照他的的使用方式把他提供的 fs 赋值到 window.fs 上,go 就会用这个 fs 了。

系统调用

看先 os.Getwd 的源码

// Getwd returns a rooted path name corresponding to the
// current directory. If the current directory can be
// reached via multiple paths (due to symbolic links),
// Getwd may return any one of them.
func Getwd() (dir string, err error) {
    if runtime.GOOS == "windows" || runtime.GOOS == "plan9" {
        return syscall.Getwd()
    }

    // Clumsy but widespread kludge:
    // if $PWD is set and matches ".", use it.
    dot, err := statNolog(".")
    if err != nil {
        return "", err
    }
    dir = Getenv("PWD")
    if len(dir) > 0 && dir[0] == '/' {
        d, err := statNolog(dir)
        if err == nil && SameFile(dot, d) {
            return dir, nil
        }
    }

发现他会检查 PWD 环境变量,如果发现当前就是$PWD则会直接使用$PWD 的值,
所以在启动的时候加一句 set env 就能 getwd 的目录不正确的问题了。

func initJS() {
    //...
    os.Setenv("PWD", "/")
}

交互

这里主要写一个把 go 的 log.Println 绑定到 js console.log 的方法,其他看文档就可以了。

func (c *ConsoleWriter) Write(p []byte) (n int, err error) {
    js.Global().Get("console").Call("log", string(p))
    return len(p), nil
}

func (c *ConsoleWriter) Log(s string) {
    c.Write([]byte(s))
}

var console = new(ConsoleWriter)

func initJS() {
    log.SetOutput(console)
    // ...
}
4 声望
0 粉丝
0 条评论
推荐阅读
一文搞懂秒杀系统,欢迎参与开源,提交PR,提高竞争力。早日上岸,升职加薪。
前言秒杀和高并发是面试的高频考点,也是我们做电商项目必知必会的场景。欢迎大家参与我们的开源项目,提交PR,提高竞争力。早日上岸,升职加薪。知识点详解秒杀系统架构图秒杀流程图秒杀系统设计这篇文章一万多...

王中阳Go33阅读 2.5k评论 1

封面图
前端如何入门 Go 语言
类比法是一种学习方法,它是通过将新知识与已知知识进行比较,从而加深对新知识的理解。在学习 Go 语言的过程中,我发现,通过类比已有的前端知识,可以更好地理解 Go 语言的特性。

robin23阅读 3.2k评论 6

封面图
Golang 中 []byte 与 string 转换
string 类型和 []byte 类型是我们编程时最常使用到的数据结构。本文将探讨两者之间的转换方式,通过分析它们之间的内在联系来拨开迷雾。

机器铃砍菜刀24阅读 58.1k评论 2

年度最佳【golang】map详解
这篇文章主要讲 map 的赋值、删除、查询、扩容的具体执行过程,仍然是从底层的角度展开。结合源码,看完本文一定会彻底明白 map 底层原理。

去去100216阅读 11.5k评论 2

年度最佳【golang】GMP调度详解
Golang最大的特色可以说是协程(goroutine)了, 协程让本来很复杂的异步编程变得简单, 让程序员不再需要面对回调地狱, 虽然现在引入了协程的语言越来越多, 但go中的协程仍然是实现的是最彻底的. 这篇文章将通过分析...

去去100215阅读 11.9k评论 4

万字详解,吃透 MongoDB!
MongoDB 是一个基于 分布式文件存储 的开源 NoSQL 数据库系统,由 C++ 编写的。MongoDB 提供了 面向文档 的存储方式,操作起来比较简单和容易,支持“无模式”的数据建模,可以存储比较复杂的数据类型,是一款非常...

JavaGuide8阅读 1.7k

封面图
数据结构与算法:二分查找
一、常见数据结构简单数据结构(必须理解和掌握)有序数据结构:栈、队列、链表。有序数据结构省空间(储存空间小)无序数据结构:集合、字典、散列表,无序数据结构省时间(读取时间快)复杂数据结构树、 堆图二...

白鲸鱼9阅读 5.3k

4 声望
0 粉丝
宣传栏