使用 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

做者微信	讚揚做者