NPM nodejs and webpack installation

nodejs and npm

1, First, let's talk about node What is JS?

node.js is the running environment of JavaScript. It is not a js file. In essence, it is the encapsulation of Chrome V8 engine.

node.js is a development platform that enables JavaScript to run on the server, and makes it a scripting language with the same status as the server language (such as python, PHP, etc.).

node. Both JS and chrome browsers use the V8 engine when parsing JavaScript.

node.js capabilities:

  • (1) An alternative API is provided to make the V8 engine run better in a non browser environment; The V8 engine executes JavaScript very fast and performs very well.
  • (2) It is a platform based on chrome JavaScript runtime, which can easily build network applications with fast response and easy expansion.

2, Let's see what npm is?

Practical problem: when a website relies on more and more JS code, programmers find it very troublesome: jquery, bootstrap, underscore, etc. need to be downloaded separately in different places and imported into the project. So someone thought, "why is there no tool to manage these resources uniformly?"

So npm came out; Its full name is node package manager (package management tool); npm is very similar to maven and gradle. However, maven and gradle are used to manage Java jar packages, while npm is used to manage js.

The implementation principle is the same as maven and gradle:

  • (1) First, establish a remote code warehouse to store all the shared JS code, and each JS file has its own unique identifier.
  • (2) When users want to use a JS file, they only need to reference the corresponding identifier and it will be downloaded automatically.

But when it first came out, no one bird it. Later, node JS has also been developed. There is a lack of a package management tool, so the two hit it off, and the result is node JS has built-in npm (this also leads to the fact that if you want to download npm, you must download node.js, which contains npm). Later, with node After JS became popular, many people began to use npm to download and share code. Now sharing code with npm has become the standard configuration of the front end.

node Download

  • Download the corresponding version node

    • https://nodejs.org/en/download/
    • Select the installation directory to install
    • At the command prompt, enter the command: node -v

  • Package Explorer NPM

    • node package management and distribution tools. In fact, we can understand NPM as Maven at the front end
    • NPM local installation

    After downloading the Node, we can use the npm command to manage the package and check the Node version

    npm --version
npm -v

    npm usage

    install The command is used to install a module if we want to install it express Module( node of web Frame)
　　　　　　npm install express

#After installation, a node already appears in this directory_ Modules folder and package lock json. 			
　　　
　　　node_modules Folder for downloading js Library (equivalent to maven Local warehouse),

    package-lock.json Is when node_modules or package.json Automatically generated files when changes occur.

    #NPM global installation
　　　　If you don't know where your global directory is, execute the command
　　　　　　npm root ‐g

　　　　For example, we have global installation jquery, Enter the following command
　　　　　　npm install jquery ‐g

#Batch download
　　　　We downloaded some codes from the Internet and found that only package.json,No, node_modules In this case, we need to download these folders again through the command js Library.
　　　　Enter directory( package.json Directory) enter the command:
　　　　　　npm install
　　　　At this point, npm It will be downloaded automatically package.json Dependent in js Library.

#Taobao NPM image
　　　　Sometimes we use npm Downloading resources will be slow, so we can install one cnmp(Taobao image)To speed up the download.
　　　　Enter the command to install Taobao image globally.
　　　　　　npm install ‐g cnpm ‐‐registry=https://registry.npm.taobao.org
　　　　After installation, we can use the following command to view cnpm Version of
　　　　　　cnpm ‐v
　　　　use cnpm
　　　　　　cnpm install Need to download js library

Environment variable configuration

The environment configuration mainly configures the path of the global module installed by npm and the path of cache

In the system environment variable path Add in G:\Node.js

Once configured successfully, it can be used in any path node,npm,npx command

Configure global installation package path

Open the cmd window and run the following command. The path can be specified arbitrarily. If the path does not exist, it will be generated automatically

npm config set prefix "G:\Node.js\node_modules\node_global"
npm config set cache "G:\Node.js\node_modules\node_cache"

  • Test whether the configuration is successful

    npm install -g vue

stay G:\Node.js\node_modules\node_global You can see it under the path vue Indicates that the installation was successful

Configure global package executable environment variables

The purpose of configuring the global installation package environment variable is that when you use npm install -g to install modules, you can use it without configuring each module environment variable

#When you install a global executable package, you need to add environment variables to each package, or you can only use it by entering the directory

#If you configure the global installation package environment variable, you can run commands anywhere

Configuration method

Just add the global installation package path just set to the system environment variable path

npm config set prefix "G:\Node.js\node_modules\node_global"

Configure global package dependencies

This is to reference a common node for multiple projects_ Modules, if you think each project should install node through npm install_ There are many duplicate modules, which are troublesome and occupy a lot of space. You can configure the environment variable NODE_PATH

Steps for nodejs module lookup

Start searching in the same directory of program files;
Is it a core module? Yes, return to module: No, continue;
Module in current directory node_modules Do you want to go? Yes, return to module: No, continue;
Try to enter the parent directory. Does the parent directory exist? Yes, return 3: No, continue;
Module in environment variable NODE_PATH Under the specified directory? Yes, return module: No, throw an exception.

webpack

https://zhuanlan.zhihu.com/p/65574428

webpack is a bundler that can package multiple js files into one file (in fact, it can package not only js files, but also other types of files, such as css files, json files, etc.).

webpack can only run in the node environment, so you need to install the latest version of node js

  • Global installation of webpack

    Global installation means that all projects on this machine will use this globally installed webpack

    npm install -g webpack webpack-cli
webpack -v
(webpack -v View the globally installed webpack (version of)

  • Install webpack locally (recommended)

npm uninstall -g webpack #Uninstall Global

#Create a test folder webpack demo, enter the directory in the console, and then initialize npm in the directory
npm init
#There will be one more package JSON file
 It contains webpack-demo Information of the project in the folder and the dependencies of the project (toolkit to be used, etc.)

#Edit Package JSON file so that the sample project will not be distributed by npm:
"private": true,

Then you can install it locally webpack Yes

npm install --save-dev webpack@<version> 
Reinstall webpack-cli
npm install --save-dev webpack-cli

npx webpack -v #See the version of webpack currently installed locally:

User variables and system variables

There are two environment variables in Windows system: user variable and system variable

1. The environment variable * * is not case sensitive, * * for example, path is the same as path

2. The system variable is valid for all users

3. User variables are only valid for the current user

4. The name of user variable and system variable is variable, and the value is the content inside, that is, the content you want to store is stored through the variable, which is convenient for calling

4. PATH of system variable and user variable: tell the system where the executable file is placed (the PATH of the normal execution program should be placed in the PATH, and a variable cannot be created. cmd will prompt "not an internal or external command, or not an executable program")

5. When windows system executes user commands, if the user does not give the absolute path of the file, first look for the corresponding executable file, batch file, etc. in the current directory;

6. If the program with the corresponding file name cannot be found in the current directory, find the corresponding executable program files in the PATH of the system variable in turn (the search order is from left to right according to the entry order of the PATH, and the first one has the highest priority. If the program is found, the search will be stopped, and the subsequent paths will no longer be executed)

7. If the PATH of the PATH of the system variable cannot be found, find it in the PATH of the user variable (if the PATH of the system variable and the user variable contain the same command at the same time, the command in the PATH of the system variable will be executed first)

8. Every time you add a new command, make sure you save it. Restart CMD again, otherwise the command will not take effect.

9. Output environment variable ECHO% and variable name% in CMD

Keywords: Front-end npm Webpack

Added by Kyrillos on Mon, 24 Jan 2022 11:48:23 +0200

Popular Keywords

©2024 Programming VIP