使用 wml 进行模块调试

前端模块开发已经成为了开发标准。模块开发带来的一大便利就是让咱们能够跨页面甚至跨应用复用代码。当咱们跨应用复用模块时，就须要借助 npm 把模块发布出去供各个系统调用。今天介绍的 wml 是一个进行模块调试的利器。

wml 是什么

wml 侦听某个文件夹中的更改（使用Watchman），而后将更改的文件复制到另外一个文件夹中。

wml 是一个 CLI 工具，其工做方式与ln -s很是类似。首先，使用 wml add 命令设置连接，而后运行wml服务（wml start）开始监听。仅此而已！

为何使用 wml

让咱们面对现实吧，有时符号连接还不够。Github中有超过 1万个 关于 "support for symlinks"。

到目前为止，我遇到的两个例子是: React Native 的包管理器缺失对 symlinks 的支持 和Webpack的 inability to find linked modules dependencies。不少人的办法就是直接修改 node_modules 下的文件夹，可是这会形成不少问题：

1. 当同时有两个项目依赖你的模块时，就搞砸了
2. 当不当心执行了 npm install，就又搞砸了
3. 总之就是感受这样不对

wml 使用 Facebook 的超快 Watchman 来监视源文件夹中的更改，并将它们（而且仅复制）复制到目标文件夹中。

安装 watchman

• watchmamn Installation
• How to install Watchman on Windows (win10)?

windows 下为了让 wml start 可以工做须要执行如下命令：

# npmGlobalPrefix 能够经过 `npm prefix -g` 获取
$ watchman watch ${npmGlobalPrefix}\node_modules\wml\src
# 必定要重启电脑让配置生效！
复制代码

安装 wml

$ npm install -g wml
复制代码

wml 命令

• wml add|a <src> <dest>: 添加连接
• wml start|s: 开启 wml
• wml list|ls: 显示全部的连接
• wml rm <linkId>: 删除一个连接，传递 all 能够删除全部连接
• wml enable|e: 启用一个连接，传递 all 一键启用全部连接
• wml disable|d: 禁用一个连接，传递 all 一键禁用全部连接
• watchman watch-del-all: 修改 .watchmanconfig 以后须要清空 watchman 缓存

最佳实践

npm scripts

这是个人习惯，写脚本能提升工做效率：

{
  "scripts": {
    "dev": "wml start",
    // yarn wml:add <dest>
    "wml:add": "wml add ./",
    // 修改 `.watchmanconfig` 以后须要清空 watchman 缓存
    "wml:clean":"watchman watch-del-all",
  },
}
复制代码

demo 在模块中

你可能为了演示你的模块，而把演示项目放在模块项目中，这也很常见的。咱们须要作一下配置：

一、修改 package.json

{
  "name": "zhiliao",
  "scripts": {
    "dev": "wml start",
    "wml:add": "wml add ./ ./Example/node_modules/zhiliao/",
    // 修改 `.watchmanconfig` 以后须要清空 watchman 缓存
    "wml:clean":"watchman watch-del-all",
  },
}
复制代码

二、配置 .watchmanconfig 文件把 Example 文件夹忽略掉

{
  "ignore_dirs": [
    ".git",
    "node_modules",
    "yarn-error.log",
    "yarn.lock",
    "README.md",
    "Example"
  ]
}
复制代码

联系做者

本文首发于我的博客：youngjuning.js.org/

Contacts

做者微信	赞扬做者