How to quickly get started with VUE3.0: Go to study
1.1 What is modularization?
Modularization refers to the process of dividing the system into several modules layer by layer from top to bottom when solving a complex problem. For the entire system, modules are units that can be combined, decomposed and replaced.
Modularization in the field of programming is to follow fixed rules and split a large file into multiple small modules that are independent and interdependent.
The benefits of splitting the code into modules:
It improves the reusability of the code,
improves the maintainability of the code,
and enables on-demand loading.
2.1 Classification of modules
in Node.js Based on Depending on the source of the module, the modules are divided into 3 major categories, namely:
built-in modules (built-in modules are officially provided by Node.js, such as fs, path, http, etc.)
custom modules (each .js file created by the user) , are all custom modules)
Third-party modules (modules developed by third parties are not officially provided built-in modules, nor are they custom modules created by users, and need to be downloaded before use)
2.2 Load modules
using the powerful require() Method, you can load the required built-in modules, user-defined modules, and third-party modules for use. For example:
Note: When using the require() method to load other modules, the code in the loaded module will be executed; the file suffix '.js' can be omitted when loading a custom module.
2.3 Module scope in Node.js
What is module scope
? Similar to function scope, variables, methods and other members defined in a custom module can only be accessed within the current module. This module-level access restriction, It's called module scope.
The benefit of module scope
prevents the problem of global variable pollution (if two js files are imported with script tags and the same variable is defined in both files, the former one will be overwritten by the latter one)
2.4 Sharing module scope externally Member
1. Module object
There is a module object in each .js custom module, which stores information related to the current module. It is printed as follows:
2. module.exports object
In a custom module, you can use the module.exports object to share members within the module for external use.
When the outside world uses the require() method to import a custom module, what it gets is the object pointed to by module.exports.
3. Points to note when sharing members:
When using the require() method to import a module, the import result will always be based on the object pointed to by module.exports.
4. Exports object
Since the module.exports word is relatively complicated to write, in order to simplify the code for sharing members externally, Node provides the exports object. By default, exports and module.exports point to the same object. The final shared result is still based on the object pointed to by module.exports.
5. Misunderstandings in the use of exports and module.exports.
Always remember that when require() a module, you will always get the object pointed to by module.exports:
Personal understanding: exports and module.exports originally point to the same object. Just by mounting the data, it still points to the same object. The data mounted by exports can also be obtained by the require module. If one party assigns a value (pointing to another object, then they do not point to the same object, and the require module gets the object pointed to by module.exports, so once one party changes the pointer, the require module will not get the value of exports.)
Note: In order to prevent confusion, it is recommended that you do not use exports and module.exports at the same time in the same module.
2.5 Modularity specification in Node.js Node.js follows the CommonJS modularity specification. CommonJS stipulates the characteristics of modules and how each module interacts with each other. interdependence.
CommonJS stipulates:
(1) Inside each module, the module variable represents the current module.
(2) The module variable is an object, and its exports attribute (ie module.exports) is the external interface.
(3) Loading a module actually loads the module.exports attribute of the module. require() method is used to load modules.
3.1 Packages
1. What is a package?
Third-party modules in Node.js are also called packages.
Just like computers and computers refer to the same thing, third-party modules and packages refer to the same concept, but with different names.
2. The source of the package
is different from the built-in modules and custom modules in Node.js. The package is developed by a third-party individual or team and is free for everyone to use.
Note: The packages in Node.js are all free and open source and can be downloaded and used for free without paying.
3. Why packages are needed?
Because the built-in modules of Node.js only provide some low-level APIs, the efficiency of project development based on built-in modules is very low.
The package is encapsulated based on built-in modules, providing a more advanced and convenient API, which greatly improves development efficiency.
The relationship between packages and built-in modules is similar to the relationship between jQuery and the built-in browser API.
4. Where to download packages?
There is an IT company abroad called npm, Inc. This company has a very famous website: www.npmjs.com/, which is the largest package sharing platform in the world. You can download it from this website Search for any package you need, as long as you have enough patience!
Up to now, more than 11 million developers around the world have developed and shared more than 1.2 million packages for our use through this package sharing platform. npm, Inc. provides a server at registry.npmjs.org/ to share all packages externally. We can download the packages we need from this server.
Note:
Search for the package you need from the www.npmjs.com/ website
and download the package you need from the registry.npmjs.org/ server
5. How to download the package
npm, Inc. The company provides a package management tool, we can Use this package management tool to download the required packages from the registry.npmjs.org/ server to local use.
The name of this package management tool is Node Package Manager (referred to as npm package management tool). This package management tool is installed on the user's computer along with the Node.js installation package.
You can execute the npm -v command in the terminal to check the version number of the npm package management tool installed on your computer:
3.2 First experience with npm
1. Command to install packages in the project
If you want to install a package with a specified name in the project, you need to run the following command:
npm install The complete name of the package
The above packaging command can be abbreviated into the following format:
npm i The complete name of the package
2. What additional files are added after the initial package installation?
After the initial package installation is completed, there will be an additional folder called node_modules and a configuration file package-lock.json under the project folder.
Among them: the node_modules folder is used to store all packages that have been installed in the project. When require() imports a third-party package, it searches for and loads the package from this directory.
The package-lock.json configuration file is used to record the download information of each package in the node_modules directory, such as the package name, version number, download address, etc.
Note: Programmers should not manually modify any code in the node_modules or package-lock.json files, the npm package management tool will automatically maintain them.
3. Install the specified version of the package.
By default, when you use the npm install command to install a package, the latest version of the package will be automatically installed. If you need to install a package of a specified version, you can specify the specific version through the @ symbol after the package name, for example:
npm i [email protected]
4. The semantic version specification of the package
The version number of the package is in "dotted decimal" It is defined in the form of a total of three digits, for example, 2.24.0.
The meaning of each digit is as follows:
1st digit: major version
2nd digit: functional version
3rd digit: bug fix version
version number Rules for promotion: As long as the previous version number increases, the subsequent version number will return to zero.
3.3 Package management configuration file
npm stipulates that a package management configuration file called package.json must be provided in the project root directory. Used to record some configuration information related to the project. For example:
project name, version number, description, etc.
Which packages are used in the project,
which packages are only used during development,
which packages are needed during development and deployment
Problems encountered
in multi-person collaboration
:The size of third-party packages is too large, making it inconvenient for team members to share project source code.
Solution: Remove node_modules when sharing.
2. How to record which packages are installed in the project
. In the project root directory, create a configuration file called package.json, which can be used to record which packages are installed in the project. This makes it easier to share the project's source code among team members after removing the node_modules directory.
Note: In future project development, be sure to add the node_modules folder to the .gitignore ignore file.
3. Quickly create package.json.
The npm package management tool provides a shortcut command to quickly create the package.json package management configuration file in the directory where the command is executed:
npm init -y
Note:
(1) The above command It can only be run successfully in the English directory! Therefore, the name of the project folder must be named in English, not Chinese, and there must be no spaces.
(2) When running the npm install command to install a package, the npm package management tool will automatically record the name and version number of the package into package.json.
4. Dependencies node
In the package.json file, there is a dependencies node, which is specially used to record which packages you have installed using the npm install command.
5. Install all packages at once.
When we get a project with node_modules removed, we need to download all the packages into the project before we can run the project. Otherwise, an error similar to the following will be reported:
You can run the npm install command (or npm i) to install all dependent packages at once:
6. To uninstall a package
, you can run the npm uninstall command to uninstall the specified package:
npm uninstall specific package name
Note: After the npm uninstall command is executed successfully, the uninstalled package will be automatically removed from the dependencies of package.json. There is no shorthand for uninstalling.
7. devDependencies node.
If some packages will only be used during the project development phase and will not be used after the project goes online, it is recommended to record these packages in the devDependencies node.
Correspondingly, if some packages need to be used after development and project launch, it is recommended to record these packages in the dependencies node.
You can use the following command to record the package into the devDependencies node:
3.4 Solve the problem of slow package downloading speed
1. Why is the package downloading speed slow?
When using npm to download packages, it downloads from the overseas registry.npmjs.org/ server by default, so the package downloading speed will be very slow.
2. Taobao NPM mirror server
Taobao has built a server in China to synchronize packages on official foreign servers to domestic servers, and then provide package distribution services in China. This greatly improves the speed of downloading packages.
Extension: Mirroring is a form of file storage. The data on one disk has an identical copy on another disk, which is a mirror.
3. Switch the package mirror source of npm.
The mirror source of the package refers to the server address of the package.
4. nrm
In order to more conveniently switch the image source of the package, we can install the nrm tool, and use the terminal command provided by nrm to quickly view and switch the image source of the package.
3.5 Classification of packages
Packages downloaded using the npm package management tool are divided into two categories, namely:
project package
global package
1. Project package
. Those packages that are installed in the node_modules directory of the project are all project packages.
Project packages are divided into two categories, namely:
development dependency packages (packages recorded in the devDependencies node, which are only used during development)
core dependency packages (packages recorded in the dependencies node, which are used during development and the project It will be used after going online)
2. Global package When executing the npm install command, if the -g parameter is provided, the package will be installed as a global package.
The global package will be installed in the C:Usersuser directoryAppDataRoamingnpmnode_modules directory.
Note:
(1) Only tool packages need to be installed globally. Because they provide useful terminal commands.
(2) To determine whether a package needs to be installed globally before it can be used, you can refer to the official instructions for use.
3. i5ting_toc
i5ting_toc is a small tool that can convert md documents into html pages. The steps to use are as follows:
3.6 Standardized package structure
After understanding the concept of packages and how to download and use packages, let's take a deeper look at the internal structure of packages.
A standardized package must meet the following three requirements:
(1) The package must exist in a separate directory
(2) The top-level directory of the package must contain the package.json package management configuration file
(3) package.json must contain three attributes: name, version, and main, which respectively represent the package name, version number, and package entry.
Note: The above three requirements are the format that a standardized package structure must comply with. For more constraints, you can refer to the following URL: https://yarnpkg.com/zh-Hans/docs/package-json
3.7 Develop your own Package
1. Initialize the basic structure of the package
(1) Create a new itheima-tools folder as the root directory of the package
(2) In the itheima-tools folder, create the following three files:
package.json (package management configuration file)
index.js (entry file of the package)
README.md (description document of the package)
2. Initialize package.json
Note: name - used to tell the name of the application or software package; version - indicates the current version; main - sets the entry point of the application; description is a short description of the application/software package; keywords - this attribute contains Array of keywords related to the software package function (helps to browse the node official website to find the software package); license—specifies the license of the software package.
3. Write the package documentation.
The README.md file in the root directory of the package is the package usage documentation. Through it, we can write the usage instructions of the package in markdown format in advance for user convenience.
There are no mandatory requirements for what content should be written in the README file; as long as the function, usage, precautions, etc. of the package can be clearly described.
3.8 Release package
1. Register npm account
(1) Visit www.npmjs.com/ website, click the sign up button to enter the registration user interface
(2) Fill in the account-related information: Full Name, Public Email, Username, Password
(3) Click the Create an Account button to register an account
(4) Log in to your email and click on the verification link to verify the account
2. Log in to the npm account.
After the npm account registration is completed, you can execute the npm login command in the terminal and enter the username and password (password) It is hidden and cannot be seen. Just enter the correct key (Enter), email address, and the OTP code sent to the email address, and then you can log in successfully.
Note: Before running the npm login command, you must first switch the server address of the package to the official server of npm. (If you were using the taobao server before, you must switch to the npm official server) Otherwise, the package publishing will fail!
3. Publish the package to npm
.
After switching the terminal to the root directory of the package, run the npm publish command to publish the package to npm (note: the package names cannot be the same. You can go to the official website to check whether there are packages with the same name).
4. Delete the published package.
Run the npm unpublish package name --force command to delete the published package from npm.
Note:
(1) The npm unpublish command can only delete packages published within 72 hours
(2) Packages deleted by npm unpublish are not allowed to be re-published within 24 hours
(3) Be careful when publishing packages and try not to publish them on npm Meaningless package!
4.1 Prioritize loading from the cache.
Modules will be cached after the first load. This also means that calling require() multiple times will not cause the module's code to be executed multiple times.
Note: Whether they are built-in modules, user-defined modules, or third-party modules, they will be loaded from the cache first, thereby improving module loading efficiency.
4.2 Loading mechanism of built-in modules
Built-in modules are modules officially provided by Node.js. Built-in modules have the highest loading priority.
For example: require('fs') always returns the built-in fs module, even if there is a package with the same name in the node_modules directory, it is also called fs.
4.3 Custom module loading mechanism
When using require() to load a custom module, you must specify a path identifier starting with ./ or ../. When loading a custom module, if no path identifier such as ./ or ../ is specified, node will load it as a built-in module or a third-party module.
At the same time, when using require() to import a custom module, if the file extension is omitted, Node.js will try to load the following files in order:
(1) Load according to the exact file name
(2) Completion .js extension to load
(3) Complete the .json extension to load
(4) Complete the .node extension to load
(5) Loading fails, the terminal reports an error
4.4 If the loading mechanism of third-party modules
is passed to require() If the module identifier is not a built-in module and does not start with './' or '../', Node.js will try to load the third-party module from the /node_modules folder, starting from the parent directory of the current module.
If the corresponding third-party module is not found, it is moved to the parent directory one level above and loaded until the root directory of the file system.
For example, assuming require('tools') is called in the 'C:Usersitheimaprojectfoo.js' file, Node.js will search in the following order:
(1) C:Usersitheimaproject node_modulestools
(2) C:Usersitheimanode_modulestools
(3) C:Usersnode_modulestools
(4) C:node_modulestools
4.5 Directory as a module
When passing the directory as a module identifier, When loading require(), there are three loading methods:
(1) Find a file called package.json in the directory being loaded, and look for the main attribute, which serves as the entry point for require() to load
(2) If in the directory If there is no package.json file, or the main entry does not exist or cannot be parsed, Node.js will try to load the index.js file in the directory.
(3) If the above two steps fail, Node.js will print an error message in the terminal, reporting the missing module: Error: Cannot find module 'xxx'
This article is reproduced from: https://juejin.cn/post/7083445004240158757