Front-end module development has become the development standard. One of the benefits of module development is the ability to reuse code across pages and even across applications. When we reuse modules across applications, we need to use NPM to publish the modules for system calls. Today’s introduction to WML is a powerful tool for debugging modules.

What is the WML

WML listens for changes in one folder (using Watchman), and then copies the changed files into another folder.

WML is a CLI tool that works much like lN-S. First, set up the link using the WML add command, then run the WML service (WML Start) to start listening. That’s all!

Why use WML

Let’s face it, sometimes symbolic links aren’t enough. Github has more than 10,000 listings for “Support for Symlinks”.

The two examples I’ve encountered so far are React Native’s package manager missing support for SymLinks and Webpack’s inability to find Linked Modules Dependencies. A lot of people do this by modifying the node_modules folder directly, but this causes a lot of problems:

  1. When you have two projects that depend on your module at the same time, you’re screwed
  2. When accidentally executednpm install“And I screwed up again
  3. It just doesn’t feel right

WML uses Facebook’s ultra-fast Watchman to monitor changes in the source folder and copy them (and only copy them) to the target folder.

Install the watchman

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

For WML Start to work on Windows, run the following command:

# npmGlobalPrefix can be obtained by 'NPM prefix -g'
$ watchman watch ${npmGlobalPrefix}\node_modules\wml\src
Be sure to restart your computer for the configuration to take effect!
Copy the code

The installation

$ npm install -g wml
Copy the code

WML command

  • wml add|a <src> <dest>: Add link
  • wml start|s: open the WML
  • wml list|ls: Displays all links
  • wml rm <linkId>: Delete a link, passallYou can delete all links
  • wml enable|e: Enables a link to be deliveredallEnable all links with one click
  • wml disable|d: Disables a link for deliveryallDisable all links with one click
  • watchman watch-del-all: modify.watchmanconfigThen you need to clear the Watchman cache

Best practices

npm scripts

This is a habit of mine, writing scripts to improve productivity:

{
  "scripts": {
    "dev": "wml start".// yarn wml:add <dest>
    "wml:add": "wml add ./".// You need to clear the Watchman cache after modifying '.watchmanconfig '
    "wml:clean":"watchman watch-del-all",}}Copy the code

Demo is in the module

It is also common for you to put your demo project in a module project for the purpose of demonstrating your module. We need to do the configuration:

1. Modify package.json

{
  "name": "zhiliao"."scripts": {
    "dev": "wml start"."wml:add": "wml add ./ ./Example/node_modules/zhiliao/".// You need to clear the Watchman cache after modifying '.watchmanconfig '
    "wml:clean":"watchman watch-del-all",}}Copy the code

2. Configure the. Watchmanconfig file to ignore the Example folder

{
  "ignore_dirs": [
    ".git"."node_modules"."yarn-error.log"."yarn.lock"."README.md"."Example"]}Copy the code

This article first appeared in Yang Junning’s blog, creation is not easy, your like 👍 is the power of my persistence!!