role

It can be debugged locally without publishing through soft connection

use

The project will be linked to global node_modules by running the following command in the package directory

cd <package>
npm link
Copy the code

Go to the development directory where you want to use the package and run the command projectName as defined in package.json

npm link <packageName>
Copy the code

The following problems occurred in vue-CLI project:

1, No ESLint configuration found

The default VUe-CLI esLint configuration ignores /node_modules/, but NPM Link exposes the actual project directory. This is because Webpack resolves link’s package path to the real path, so it is not affected by ignore, so this directory is not excluded. So the error cannot be found

Option 1: Change vue.config.js, symlinks set to false, it is considered under node_modules, so hotreload will not be implemented

module.exports = {
  chainWebpack: config= > config.resolve.symlinks(false)}Copy the code

Option 2: Add exclusions to the.eslintignore file to make esLint ignore the folder

**/packageName
Copy the code

2, Uncaught ReferenceError: exports is not defined

Refer to the link

Webpack precompiles files downloaded from NPM and converts them to ES6, while NPM Link introduces non-real dependencies and does not precompile, resulting in an error

3. Replace NPM link with YALC

This is equivalent to creating a repository in the local environment, which is equivalent to introducing an actual dependency, eliminating both of these problems.

Installation:

yarn global add yalc
Copy the code

use

  1. Go to the package directory and publish the package to the local YALC repository, similar to NPM publish
cd <package>
yalc publish
Copy the code
  1. Add dependencies in the development directory
yalc add <packageName>
Copy the code
  1. The package.json dependency version number is displayed as the local YALC path
"packageName": "file:.yalc/packageName"
Copy the code