A front end that doesn’t work well with package managers is an entry-level front end that doesn’t work well
webpackThe front end is a primary front end
Three package managers can be used together, as long as you are bold enough, no problem!
Recommend two articles
- Handwritten React scaffolding
- Handwritten Vue scaffolding
- Front-end performance optimization incomplete manual
javeScriptIn writing, we try not to define global variables and encapsulate functions without any side effects, because the query time of all variables will be slower than that of local variables, especially considering the problem that they cannot be garbage collected in Node environment
Old rules first look at the principle
Node.jsOne of the main reasons for this success.
npmThe team did a lot to ensure that NPM remained backward compatible and consistent across different environments.
- NPM is designed around the idea of semantic versioning (semver).
- Given a version number: major version number, minor version number, patch version number, the following three situations need to increase the corresponding version number:
- Major version number: when the API changes and is incompatible with previous versions
- Minor version number: when functionality is added, but backwards compatible
- Patch version number: when a backward-compatible bug is fixed
npm 2All dependencies that each package depends on are installed. If we have A project that depends on project A, project A depends on project B, and project B depends on project C, the dependency tree would look like this:
- This structure can be very long. This is no more than a minor annoyance for unix-based operating systems, but it can be devastating for Windows, as there are many programs that can’t handle more than 260 characters of file pathnames.
npm 3A flat dependency tree was adopted to solve this problem, so our three project structures now look like this:
Saved each version of the archive that you downloaded. The contents of the local cache can be viewed through the NPM cache ls command. The design of the local cache helps reduce installation time.
- In this way, an originally very long file path name from
./node_modules/package-A/node_modules/package-B/node-modules/some-file-name-in-package-c.jsTurned out to be
- The downside of this approach is that,
npmYou must first walk through all the project dependencies before deciding how to generate a flat node_modules directory structure. NPM must build a complete dependency tree for all the modules it USES, which is a time-consuming operation and an important reason for the slow installation of NPM.
- Take it for granted that every run
NPMYou have to download everything from the Internet.
npmThere is a local cache that holds every version of the archive that has been downloaded. The contents of the local cache can be passed
npm cache lsCommand to view. The design of the local cache helps reduce installation time.
npmThe usage is exactly the same except when executing commands
npmInstallation plug-in downloaded from foreign servers, affected by the network, may appear abnormal, if the NPM server in China is good, so taobao team did this. From the official website: “this is a complete
npmjs.orgMirror, you can use this instead of the official version (read only), sync frequency is currently 10 minutes to ensure as much sync as possible with the official service.
- Official address:
npm install -g cnpm --registry=https://registry.npm.taobao.org
YarnThe primary goal in the beginning was to address the uncertainty of the NPM installation due to semantic versioning described in the previous section. Although you can use
npm shrinkwrapTo implement a predictable dependency tree, but it is not the default option, it is up to all developers to know and enable this option.
YarnA different approach was taken. Each yarn installation generates a yarns.lock file similar to npm-shrinkwrap. Json, and it is created by default. In addition to the general information,
yarn.lockThe file also contains a checksum of what is to be installed to ensure that the version of the library used is the same.
- Yarn is a new NPM client that has been redesigned to allow developers to do all the necessary work in parallel and add some other improvements.
- The running speed was significantly improved and the overall installation time was reduced
- Like NPM, yarn USES local caching.
Unlike NPM, yarn installs local cache dependencies without an Internet connection and provides an offline mode。
- Licenses that allow you to merge all packages used in your project
- Installation via NPM is generally not recommended. NPM installation is non-deterministic, packages are not signed, and NPM does not perform any integrity checks other than basic SHA1 hashing, which poses a security risk to installing system programs. The author used it in a project that relied on hundreds of packages
npmI lost my bag, which cost me a lot. My tears fell down unconsciously.
First look at a very failed package download that actually reads resources from the global (not configured
webpackIt’s called because it’s this long.)
First we start with the principle, and we use
cnpm initWhat happened?
jsonFile internal declaration of the original version information, author information, etc., if you need to be uploaded to NPM as a command line tool, should be configured
binDeclare the entry field
So when we use
cnpm iWhat happens when you do that?
- First, it will depend on whether your command line suffix is added
globalDetermine whether the downloaded package is in the global environment or the current one
node_moduleFolder directory (this is especially important, someone out of the BUG, just because in use
cnpmThe result of not specifying whether the added dependency is global or local
jsonThere is no corresponding package name on the file, and the project will never get up.)
- Then follow your instructions
--save -devDeciding whether it is a development dependency or an online dependency is, in fact, the point
yarnNo problem with that, because
yarnHas its own set of check package integrity mechanism, will not lose the package, will also automatically determine the addition of dependencies, out
bugThe general is
npmIt’s not clear
npmThere is only a mechanism to check programmer signatures, there is no mechanism to check package integrity, and dependencies are not automatically added to
jsonFile, then it will appear the illusion of lost package, so suggestThe main use of
npmSummary of disadvantages:
- Same project, installation time cannot maintain consistency. Due to the nature of the version number in the package.json file, the following three version Numbers represent different meanings when installed.
"5.0.3", "~5.0.3", "^5.0.3"
- “5.0.3” means install the specified version 5.0.3, “~ 5.0.3” means install the latest version 5.0.x, and “^5.0.3” means install the latest version 5.0.x. This is a problem, often the same project, some colleagues are OK, some colleagues will be due to the installation version is not consistent
- During installation, packages are downloaded and installed at the same time. At some point, one package throws an error, but NPM continues to download and install packages. Because the NPM outputs all the logs to the terminal, the error messages about the error packages will pile up
npmThe printed warning is missing, and you’ll never even notice the actual error.
yarnThe advantages of
- Speed is fast. The fast speed mainly comes from the following two aspects:
- Parallel installation: regardless
YarnWhen you perform the package installation, you perform a series of tasks.
npmEach is executed on a queue
package“, which means it has to wait until now
packageAfter the installation is complete, the subsequent installation can proceed. while
YarnParallel execution of all tasks improves performance.
If you have previously installed a package and retrieved it from the cache at Yarn reinstallation, you do not need to download it from the network as NPM does。
- Installation version unification: to prevent pulling different versions,
YarnThere is a lock file
(lock file)Records the version number of the module being installed exactly. Every time a new module is added,
YarnYarns. lock is created (or updated). This ensures that the same version of the module is used each time the same project dependency is pulled. NPM does have a way to implement packages that use the same version everywhere, but requires the developer to execute
npm shrinkwrapCommand. This command will generate a lock file during execution
npm install, the lock file will be read first, just as Yarn reads the yarn.lock file.
YarnThe difference between the two is that,
YarnBy default, such a lock file is generated and the NPM passes
shrinkwrapCommand to generate
npm-shrinkwrap.jsonFile, only if this file exists,
packagesVersion information is recorded and updated.
- Cleaner output:
npmThe output is verbose. In the implementation
npm install <package>The command line will print out all installed dependencies. Yarn, by contrast, is too terse: by default, it combines
emojiPrint out the necessary information visually and directly, and provide commands for developers to query for additional installation information.
- Multi-registration source handling: all dependent packages, no matter how many times they are referenced indirectly by different libraries, will be installed from only one registration source, either NPM or bower, to prevent confusion and inconsistency.
- Better semantics:
yarnChanged a little bit
npmThe name of the command, for example
yarn add/remove，In the sense than
That’s not headline party? Said the
yarnWith all these advantages, why do we need them
You don’t have to
npm publish, how do you upload package to
npm? You don’t have to
cnpmYou can’t download some packages
Figure out the essential results of the three download packages (dependencies) :
- First to the corresponding
node_moduleDownload the package under the folder (if you must go to the whole thing, then goodbye)
jsonAdd the corresponding dependency field in the file to determine whether it is an online or a development dependency
- Do both and you’ll be successful
- The bottom line is as long as the outcome process doesn’t matter what you are
yarnDownload the package and use it again
npm cnpmThe download will repeat the download and delete the previous package
puppeteerThis package depends on
miniGoogle version of the browser to use
cnpmDownload is the perfect solution
prerender-spa-pluginThis package depends on the above
Puppet show puppeteerThis bag can also be used
- Mix package managers remember, do not repeat download dependencies,
npm cnpmDownload the dependencies, be sure to add what the dependencies are, global installation
npm iThe reasons for choosing the former are mentioned above. In general,
yarnIs the only choice, but the other two are also indispensable, such as
electronThis dependency is used
cnpmCan be a perfect one button installation
As long as bold and careful, you can use the three like a fish in water, otherwise it will be pressed on the ground friction, practice process is normal to feel good writing don’t forget to pay attention to my column, give a like to go ~