Resumen del conocimiento de NPM

MNP

Conoce a npm

npm (nombre completo Administrador de paquetes de nodos, es decir, administrador de paquetes de nodos)
es el administrador de paquetes predeterminado escrito en JS para Node
.
Sitio web oficial: https://www.npmjs.com
Más de 11 millones de desarrolladores de todo el mundo confían en npm.
Con más de un millón de paquetes de software, es el registro de software más grande del mundo.
Ejecute comandos en cmd.exe

sitio web chino npm

Paquete: https://www.npmjs.com/
Documentación: https://www.npmjs.cn/

Instalar herramientas NPM

npm es el sistema de administración de paquetes predeterminado para Node.js.
Después de instalar el nodo, npm se instalará de forma predeterminada.
El propio npm también se basa en el software de desarrollo Node.js.
Descargar Node: http://nodejs.cn

node -v
npm -v
npm install npm -g // 全局安装
npm install jquery //在工程目录下安装

La velocidad de descarga de los sitios web extranjeros es lenta, use el espejo de Taobao doméstico para acelerar la velocidad
Desde el archivo de configuración hasta el registro

npm config get registry

Configure el registro del archivo de configuración para que sea una imagen de Ali:

npm config set registry https://registry.npm.taobao.org/ -g
npm config set disturl https://registry.npm.taobao.org/ -g

Use la herramienta nrm para cambiar la fuente de Taobao

npx nrm use taobao

Establecer la dirección predeterminada:

npm config set registry https://registry.npmjs.org/

Defina npm como configuración predeterminada y cnpm como espejo de Taobao

npm install -g cnpm --registry-https://registry.npm.taobao.org 

Uso básico de NPM

Al verificar la versión, vea si npm se instaló correctamente

npm -v 

Instalar módulos usando el comando npm

npm install <module name>

Puede usarse directamente en la línea de comando, instalarse globalmente

npm install <Module Name> -g

Ver todos los módulos instalados globalmente

npm list -g

Comprobar el número de versión de un módulo

npm list vue

(@ seguido del número de versión) para que podamos actualizar la versión npm

npm -g install [email protected]

# -save Escribir dependencias en el nodo de dependencias del archivo del paquete

npm install -save moduleName

# -save-dev Escribir dependencias en el nodo devDependencies del archivo del paquete

npm install -save-dev moduleName

dependencias: dependencias en tiempo de ejecución, módulos que aún se necesitan en el entorno de producción después del lanzamiento
devDependencies: dependencias en tiempo de desarrollo. Los módulos internos se utilizan para el desarrollo, pero no para el lanzamiento, como gulp utilizado en el proyecto y módulos para comprimir css y js. Estos módulos no son necesarios después de implementar nuestro proyecto.

Actualizar el paquete a la última versión

npm update <module name> 

paquete de desinstalación

npm uninstall <module name>

Descripción del atributo del archivo Package.json

Generar archivo package.json

npm init --yes //忽略选项
npm init //一步一步设置

Escriba un comando de saludo personalizado

{
    "name": "eduwork",
    "version": "1.0.1",
    "description": "this is eduwork porject",
    "main": "index.js"
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "hello": "node -v"
    },
    "repository": {
        "type": "git",
        "url": "git"
    },
    "keywords": [
        "edu",
        "work",
        "vue",
        "react"
    ],
    "author": "dys",
    "license": "MIT"
}

Ejecutar comandos personalizados

npm run hello

instalar jquery

npm install jquery -save

Dependencias de desarrollo en el archivo package-lock.json

{ 
  "name": "eduwork",
  "version": "1.0.1",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "eduwork",
      "version": "1.0.1",
      "license": "MIT",
      "dependencies": {
        "jquery": "^3.6.0"
      }
    },
    "node_modules/jquery": {
      "version": "3.6.0",
      "resolved": "https://registry.npmmirror.com/jquery/download/jquery-3.6.0.tgz",
      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
    }
  },
  "dependencies": {
    "jquery": {
      "version": "3.6.0",
      "resolved": "https://registry.npmmirror.com/jquery/download/jquery-3.6.0.tgz",
      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
    }
  }
}

Configuración del número de versión

package.json文件中的版本号的说明，安装的时候代表不同的含义：
"5.0.3"表示安装指定的5.0.3版本
"~5.0.3"表示安装5.0.X中最新的版本
"^5.0.3"表示安装5.X.X中最新的版本

En el desarrollo real, no hay necesidad de transferir en el directorio del módulo y eliminar el paquete descargado en el directorio del módulo. Otra máquina npm install puede descargarse automáticamente. Sin complicaciones y reduce el tamaño de la transferencia. No se preocupe por transferir durante varias horas debido a la gran capacidad.

{
  //包名
  "name": "eduwork",  
  
   //包的版本号
  "version": "1.0.1",
  
   //包的描述
  "description": "this is description",
  
    //字段指定了程序的主入口文件，require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js
  "main": "index.js",  

    // 命令可用 npm run test/...运行
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "hello": "node -v"
  },

   /包代码存放的地方的类型，可以是git或svn，git可在Github上
  "repository": {
    "type": "git",
    "url": "git"
  },
   //包的作者姓名
  "author": "dys",
  
  "license": "MIT",
  
  //依赖包列表。如果依赖包没有安装，npm会自动将依赖包安装在node_module目录下
  "dependencies": { 
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "bootstrap": "^5.1.3"
  }
}

página de inicio - la URL del sitio web oficial de
los colaboradores del paquete - los nombres de otros colaboradores del paquete
palabras clave - palabras clave

comandos comunes npm

Npm proporciona muchos comandos, como instalar y publicar, use la ayuda de npm para ver todos los comandos.
Use npm help <comando> para ver ayuda detallada para un comando, por ejemplo

npm help install

Usado en el directorio donde se encuentra package.json, el programa de línea de comandos actual se puede instalar localmente primero y se puede usar para pruebas locales antes del lanzamiento.

npm install . -g

Puede actualizar los módulos correspondientes en el subdirectorio node_modules en el directorio actual a la última versión.

npm update <package>

Puede actualizar el programa de línea de comandos correspondiente instalado globalmente a la última versión.

npm update <package> -g 

La memoria caché local de NPM se puede vaciar, útil contra las personas que publican nuevas versiones de código con el mismo número de versión.

npm cache clear 

Puede deshacer la publicación de un código de versión que haya publicado.

npm unpublish <package>@<version> 

Uso del paquete de instalación de NPM

Cree un nuevo index.html en la carpeta del proyecto eduwork

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
</head>

<body>

    <script>
        $(function() {
            console.log(111);
        })
    </script>
</body>

</html>

Cree un nuevo foo.js en la carpeta del proyecto eduwork

module.exports=100

Cree un nuevo index.js en la carpeta del proyecto

const $ = require('jquery')

let num = require("./foo.js");
console.log(num)

Ejecute el archivo index.js en cmd

node index.js

Cree un nuevo func.js en la carpeta del proyecto, exponiendo module.exports = ...

module.exports = function(args){
    let sum =0;
    for(let i=0;i<args.length;i++){
        sum +=i;
    }
    return sum;
}

Introduce el código require(…) en index.js, y modifícalo en foo.js a module.exports = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const $ = require('jquery');

let nums = require('./foo.js');

const fun = require('./func');

console.log(fun(nums));

Practique la resolución de problemas de compatibilidad de sintaxis ES6 instalando paquetes a través de npm

Ejercicio: Solución de compatibilidad con ES6
La sintaxis de ES6 informará errores en navegadores más antiguos.
Tabla de compatibilidad: http://kangax.github.io/compat-table/es6/
IE10+, Chrome, FireFox, terminal móvil, NodeJS ahora admite
el método de navegador de versión inferior compatible con ES6:
conversión en línea (desventaja: aumenta el tiempo de representación de la página, la respuesta es bonito y no se puede actualizar durante mucho tiempo)
Compile por adelantado (método recomendado, no afecta la representación del navegador)

//ES6
var fn = (v=>console.log(v))
se convierte en
//ES5
"use strict"
var fn = function fn(v){ return console.log(v); }; (las herramientas tienen bable , jsx, traceur, es6-shim, etc.)

Copie la dirección a la versión en la biblioteca de recursos estáticos

前端静态资源库：https://cdn.baomitu.com/

, cree un nuevo demo.html en la carpeta del proyecto e importe babel-core

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://lib.baomitu.com/babel-core/5.8.38/browser.js"></script>
    </head>
    <body>
        <script type="text/babel">
            const name = "学习天地"
            console.log(name);
            
        </script>
    </body>
</html>

1. Use NPM para instalar el paquete babel-cli globalmente.
2. Encuentre un directorio y use npm para inicializar un proyecto para construir nuestro entorno babel. ( npm init ) o ( npm init -y ).
3. Babel-node, una herramienta de compilación proporcionada por babel, también puede ejecutar nuestro código js (babel-node index.js)
4. Cree un nuevo archivo .babelrc en el directorio del proyecto (este es el archivo de configuración de babel)
{ " presenta": ["es2015", "stage-2"],//Establecer las reglas de transcodificación "complementos": ["transform-runtime"]//Establecer el complemento } 5. Necesita convertir a es2015, instale la biblioteca que necesidad:

npm install babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-2 -save-dev

6. Abra el archivo package.json en nuestro proyecto babel y modifíquelo de la siguiente manera

"scripts":{"build":"babel src -w -d lib"}

7. Compile todo el directorio src y envíelo al directorio lib. Aquí src se refiere al directorio que debe convertirse, lib se refiere al directorio de almacenamiento del contenido de salida, -w en realidad significa -watch, lo que significa monitorear el archivo y compilar la salida en tiempo real.

8. Cree un nuevo directorio src y un directorio lib, recuerde compilarlos; de lo contrario, se informará un error y luego inicie la herramienta babel
9. Ingrese npm run build en la línea de comando

npm install --save-dev  babel-cli -g

Consulta la versión de babel

babel -V

Instalación y uso del hilo de producto de la competencia de NPM

¿Qué es el hilo?
Yarn es una nueva herramienta de gestión de paquetes JS lanzada conjuntamente por Facebook, Google, Exponent y Tilde. Como está escrito en el documento oficial, Yarn parecía compensar algunos defectos de npm. Debido a que NPM5 y versiones anteriores tendrán los siguientes problemas:
>> La instalación de npm es extremadamente lenta, especialmente cuando se elimina un nuevo proyecto, se tarda medio día en eliminar node_modules y sigue siendo lo mismo cuando se reinstala.
>> Cuando varias personas desarrollan el mismo proyecto, se produce un error debido a versiones instaladas inconsistentes
Sitio web oficial: www.yarnpkg.com

instalación de hilo

>>Descargue node.js, use npm para instalar

npm install -g yarn
查看版本：yarn --version

>> Instalar node.js Descargar el instalador de yarn:
proporciona un archivo .msi que, cuando se ejecuta, lo guiará a través de la instalación de Yarn en Windows

>> Instalación fuente de Yarn Taobao, copie y pegue las siguientes líneas de código en la ventana negra para ejecutar

yarn config set registry https://registry.npm.taobao.org -g

yarn config set sass_binary_site http://cdn.npm/taobao.org/dist/node-sass -g

El uso básico del hilo.

El proyecto de inicialización es el mismo que npm init.Después de ejecutar la información de entrada, se generará el archivo package.json

yarn init

Instale todos los paquetes en package.json y guarde el paquete y todas sus dependencias en yarn.lock

yarn install

Instalar una sola versión de un paquete

yarn install --flat

Forzar una nueva descarga de todos los paquetes

yarn install --force

Instalar solo paquetes en dependencias

yarn install --production

no lee ni genera yarn.lock

yarn install --no-lockfile

no generar yarn.lock

yarn install --pure-lockfile

Agregue un paquete de dependencia al proyecto actual, que se actualizará automáticamente a los archivos package.json e yarn.lock

yarn add [package]

Instale la versión especificada, aquí se refiere a la versión principal, si necesita ser preciso con la versión secundaria, use el parámetro -E

yarn add [package]@[version]

Instale una etiqueta (como beta.next o la última)

yarn add [package]@[tag]

Agregar a devDependencies

yarn add --dev/-D

Agregar a las dependencias de pares

yarn add --peer/-P

Agregar a dependencias opcionales

yarn add --optional/-O

práctica de uso de hilo

Inicialice el proyecto y genere el paquete.json

yarn init

{
  "name": "eduwork",
  "version": "1.0.11",
  "description": "this is yarn test",
  "main": "index.js",
  "author": "dys",
  "license": "MIT"
}

agregar paquete

yarn add <module name>

{
  "name": "eduwork",
  "version": "1.0.11",
  "description": "this is yarn test",
  "main": "index.js",
  "author": "dys",
  "license": "MIT",
  "dependencies": {
    "jquery": "^3.6.0"
  }
}

eliminar paquete

yarn remove jquery

Agregar a devDependencies

yarn add jquery --dev

sitio web oficial de hilo

https://yarnpkg.com/

ventajas del hilo

Velocidad rápida, versión de instalación unificada, salida más concisa, procesamiento de múltiples fuentes de registro, mejor semántica
 

npm / yarn
npm install / yarn
npm install react --save / yarn add react
npm uninstall react --save / yarn remove react
npm install react --save-dev / yarn add react --dev
npm update --save / yarn upgrade

Migración de npm a yarn

>> Puede migrar de npm a yarn, o de yarn a npm

>>Con la presión del hilo, npm ha realizado algunas mejoras similares. Antes de npm5.0, las ventajas del hilo son particularmente obvias. Pero después de npm, a través de la serie de comparaciones anterior, podemos ver que npm5 ha mejorado mucho en términos de velocidad y uso, y vale la pena intentarlo.

>> Si ya usas yarn en tus proyectos personales y no has encontrado más problemas, puedes continuar usándolo actualmente. Pero si hay escenarios compatibles con npm y proyectos que no se han cambiado a yarn, puede probar npm5 ahora.