Local development and debugging of NPM package

Time:2020-11-25

preface

NextThe ast function is used to automatically add errorsWe have developed a Babel plugin (NPM package). In this article, we will continue to explore how to develop and debug NPM package locally.

When the NPM package is still in the development stage, it is impossible to debug while releasing, otherwise it will be too cumbersome. There are many debugging methods in different scenarios, such as running debugging directly with node in NPM package, or directly running debugging in project node_ In modules, modify the source code directly after modifying the reference. In this article, I will introduce one of them, which is the one I use most often.

npm link

Enter the local Babel plugin function try catchNPM packageThe root directory execution of:

npm link

The above command can install the current package on the global (MAC path is/usr/local/bin)That is to saynpm i -gDirectory for the installation package.

The results are as follows:
Local development and debugging of NPM package
In this way, there will be an NPM package in the local global.

Since this is achieved by means of soft link, when we edit the localbabel-plugin-function-try-catchThe code in the module can directly see the updated effect in the project of installing it.

Install the local NPM package in the project

Next, we (casually) find a business project to install the NPM package. This project is used by defaultYou can click to download it
Execute in the project root directory:

npm link babel-plugin-function-try-catch

The above step is to simulate the current projectnpm installCommand, package from local sourcenpm linkThe files that have been passed.
Local development and debugging of NPM package
After implementation, business engineeringnode_modulesThere will be this bag in.
Local development and debugging of NPM package

The sharp eyed partner will find that this NPM package is different from other packages in that it carries a turning arrow symbol. As shown in the figure below:

Local development and debugging of NPM package
That is to say, it is a soft link to executenpm link xxxThen it will do a shortcut mapping in the system. So it is convenient for us to debug the NPM package that is being developed locally.

The local project project configures this 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"
      ]
    },
]

implementnpm startStart the current front end project. You can see the original code

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

Try / catch will be added to the browser automatically, and errors can be automatically captured and reported.

Local development and debugging of NPM package

So far, the association between local NPM package and local business project is completed!

Debug NPM code locally

At this point, I want to change the code in catch toconsole.log(error)At this time, you only need to modify the code in the local NPM project

// src/index.js

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

Then execute:

npm run build

Local development and debugging of NPM package

Switch to business engineering and restart the projectnpm startIt will take effect.

Local development and debugging of NPM package

When the local NPM package is debugged, execute the following in its root directory:

npm unlink babel-plugin-function-try-catch

You can release the link.

If you want to publish to NPM public network, executenpm publishThat’s fine.

That’s it. Goodbye.