NPM/YARN/PNPM research

Horizontal contrast

	Dependency management	The problem
npm	Node_modules Tree structure	Hide the dependency repeat installation
npm > v3	node_modules flatten mode	Repeated references
yarn	node_modules flatten mode	Repeated references
yarn2(berry)	Plug ‘n ‘play Each package is compressed into a zip, **.pnp.js record the package version and disk mapping location	Vue ecological support is poor
pnmp	Node_modules tree structure, operating system level Hard link to avoid repeated installation

Yarn2 explore

Yarn2 visual inspection is the best plan, and fb endorsement on the back. The project can also run normally after modification with PNP

The transformation steps are as follows:

View the current YARN version

$yarn - version 1.22.11Copy the code

Yarn2 is used for Settings

$ yarn set version berry
Copy the code

After setting the yarn version, check whether the version number is greater than 3.

$yarn - version 3.0.0Copy the code

configurationyarn-berry.cjs

$ yarn config set npmRegistryServer https://registry.npm.taobao.org
Copy the code

Delete the old node_modules folder and yarn.lock file and rebuild the entire project:

$ rm -rf node_modules
$ rm -f yarn.lock
$ yarn
Copy the code

Start the project yarn serve/ Start /build… Yarn install XXX can handle dependency errors reported by YARN, usually because some previous dependencies are not declared in package.json. Yarn install XXX can resolve this problem
If the browser can run normally after shell error processing, the modification is complete. If the browser console displays an error:

Error: Your application tried to access xxxxxx, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.
Copy the code

If package.json does not contain package.json, yarn install. If an error is reported after installation, modify. Yarnrc. yml and add the following:

PackageExtensions: 'MMNN @*': Dependencies: 'xxyy': '*'Copy the code

After adding yarn install, run the project again

It is recommended to install at least typescript plug-ins

$yarn plugin import typescriptCopy the code

Ide support: take vscode as an example:

$ yarn dlx @yarnpkg/sdks vscode
Copy the code

then: Change your VSCode workspace configuration to add the following: “typescript.tsdk”: “.yarn/sdks/typescript/lib”

At this point, the IDE can normally do static type inference for TS, and can also parse all JS dependencies. If you need to modify tsconfig.json and other procedures in the above steps, don’t go into details.

But here’s the problem: none of the type inference provided by Vetur in the Vue file is valid

Yarn2 Vue has poor ecological support

Guess what:

The Yarn2 PNP file system is based on zip packages that Vetur does not and does not plan to support 1 2 3
Yarn2 is open source by Fb, the owner of React.

[1]Vetur cannot use Prettier installed via Yarn Berry (PnP) #2092

[2]yarn@berry support

[2]support yarn pnp mode