preface

In the following article, we developed a Babel Plugin (NPM package) using AST to automatically add error reporting to functions. In this article, we continue to explore how to develop and debug NPM packages locally.

When the NPM package is still under development, it is not possible to release and debug at the same time, otherwise it would be too tedious. There are many debugging methods in different scenarios, such as using node to run debugging directly in the NPM package, or directly modifying the source code debugging directly in the project node_modules. In this article I’ll introduce one of them, and the one I use most often.

npm link

/ / babel-plugin-function-try-catch / / babel-plugin-function-try-catch / / babel-plugin-function-try-catch / /

npm link
Copy the code

The command above will install the current package globally (/usr/local/bin in MAC), which is the directory of the NPM i-g installation package.

The result after execution is shown as follows:There is such an NPM package in the local global.

Since this is done by soft linking, when we edit the code in the native babel-plugin-function-try-catch module, we can see the updated effect immediately in the project where it is installed.

Install the local NPM package in the project

Next, find a business project to install the NPM package, which this article uses by default and click to download. In the project root directory:

npm link babel-plugin-function-try-catch
Copy the code

The above step is to let the current project simulatenpm installCommand, package from the localnpm linkPass the file.After execution, business engineeringnode_modulesThere will be this package in the.

Sharp-eyed players will notice that this NPM package is different from other packages in that it has a turn arrow symbol. As shown below:

That is, this is a soft link, executenpm link xxxThen it will do a shortcut mapping in the system. So this makes it easy for us to constantly debug the NPM package we are developing locally.

The local project project configures the Loader

Open the webpack configuration file for the current project: webpack.config.js

rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: [
+ "babel-plugin-function-try-catch",
      	"babel-loader"
      ]
    },
]
Copy the code

Run the NPM start command to start the front-end engineering. You can see the original code

var fn = function(){
  console.log(11);
}
fn();
Copy the code

Try /catch is automatically added to the browser, and errors can be automatically caught and reported.

This completes the association of the local NPM package with the local business project!

Debug NPM code locally

At this point I’m going to change the catch code to console.log(error). At this point you just need to change the code in the local NPM project:

// src/index.js

- var catchStatement = template.statement(`ErrorCapture(error)`)();
+ var catchStatement = template.statement(`console.log(error)`)();
Copy the code

Then execute:

npm run build
Copy the code

Then switch to business project and restart the project NPM start to take effect.

When the local NPM package debugging is complete, execute in its root directory:

npm unlink babel-plugin-function-try-catch
Copy the code

Unlink.

To publish to the NPM public network, run NPM publish.

That’s it. Goodbye.