Background:

  1. You may need to debug the NPM package locally. How to avoid releasing the package back and forth and then installing and debugging it in the project

  2. Third party NPM package, want to change the implementation or debug inside

If a third-party NPM package is packaged with the source code in it, such as element-UI, approach 2 can be used

Methods a

  1. In their own local NPM package source inside, or fork someone else’s source code, packageRoot path npm link

The goal is to register this package as a global package

Now register the current directory as a global V-limit-input package

Here I just execute NPM link. The global package name name is determined by the name field in pacakge.json

  1. Install the package name above the NPM link in the project

The local package installed here is global, local package content changes, the project can get the latest results in real time

  1. Normal introduction in the project

The NPM package address looks for node_modules of the current project, and the test-package package in node_modules is linked to the global node_modules via a soft link (shortcut)

import VLimitText from 'v-limit-text'
Copy the code

At this point, the local debugging of the NPM package is complete. Finally, NPM publish directly to the NPM package management market

Method 2: Debug in node_modules

Node_modules shows that the element UI we installed comes with the source code

You can modify the element-UI reference to change the content in node_modules and see the effect in the project

<script>
// In normal cases, this is the import, or global registration, directly use
import {Button} from 'element-ui'
  
// When debugging is required, reference the source directly
import {Button} from 'element-ui/packages/button'

export defualt {
	name: 'test-npm-package'.components: {
            Button
	}
}
</script>
Copy the code

Normally, we introduce third-party mature packages that are packaged, such as Element-UI, as can be seen in the main field of the Element-UI packages.json

// The file ends up pointing to the element-UI/lib/element-ui.mon.js path
import ElementUI from 'element-ui'
Copy the code

You can debug packages in node_modules by modifying the reference path of the package, provided that the source code of the dependent third-party package is also included in the NPM package

other

1. Cancel the test package globally

npm unlink test-package
Copy the code

Let you learn knowledge clearly, there are codes, there are explanations, copy of the walk, learn will! Give it a thumbs up 😁😁😁

The nuggets article theme and code highlighting use the following configuration:

highlight: monokai theme: fancy