Comenzando con nodejs, este artículo es suficiente

0. Objetivos de aprendizaje

Capacidad para instalar Node.js según la documentación

Capacidad para instalar componentes usando npm

Capacidad para empaquetar js con webpack

Puede notar la diferencia entre las variables let y const en es6

Manipular propiedades de objetos con expresiones de desestructuración

Capacidad para exportar archivos de módulos usando exportar

Capacidad para importar archivos de módulos usando import

1. Nodo.js

1.1 ¿Qué es Node.js?

En pocas palabras, Node.js es JavaScript que se ejecuta en el lado del servidor.
Node.js es una plataforma construida sobre el tiempo de ejecución de Chrome JavaScript.

Node.js es un entorno de JavaScript del lado del servidor de E / S basado en eventos. Basado en el motor V8 de Google, el motor V8 ejecuta JavaScript muy rápido y tiene un rendimiento muy bueno.

1.2 Instalación de Node.js

1. Descarga la versión de Node.js correspondiente a tu sistema

https://nodejs.org/en/download/。

2. Seleccione el directorio de instalación para instalar

Se recomienda descargar la versión LTS. El valor predeterminado es continuar con el siguiente paso durante la instalación.

Una vez hecho esto, escriba en la consola:

# 查看node版本信息
node -v

1.3 Inicio rápido

1.3.1 Crear un proyecto de prueba

1.3.2 Salida de consola

Ahora hagamos el ejemplo más simple, que muestra cómo generar en la consola, crear un archivo de texto demo1.js, contenido de código

var a=1;
var b=2;
console.log(a+b);

Ingrese el comando en el símbolo del sistema

node demo1.js

1.3.3 Uso de funciones

Crear archivo de texto demo2.js

var c=add(100,200);
console.log(c);
function add(a,b){
    return a+b;
}

Símbolo del sistema para ingresar el comando

nodo demo2.js

Después de ejecutar, puede ver que la salida es 300

1.3.4 Programación modular

Cada archivo es un módulo y tiene su propio alcance. Las variables, funciones y clases definidas en un archivo son privadas e invisibles para otros archivos.

Crear archivo de texto demo3_1.js

exports.add=function(a,b){
    return a+b;
}

Dentro de cada módulo, la variable del módulo representa el módulo actual. Esta variable es un objeto cuya propiedad de exportación (es decir, module.exports) es la interfaz externa. Cargar un módulo es en realidad cargar la propiedad module.exports del módulo.

Crear archivo de texto demo3_2.js 

//引入模块demo3_1
var demo= require('./demo3_1');
console.log(demo.add(400,600));

Ingrese el comando en el símbolo del sistema

node demo3_2.js

el resultado es 1000 

1.3.5 Creación de un servidor web

Crear archivo de texto demo4.js

//http是内置模块
var http = require('http');
http.createServer(function (request, response) {
// 发送 HTTP 头部
// HTTP 状态值: 200 : OK
// 内容类型: text/plain
response.writeHead(200, {'Content-Type': 'text/plain'});
// 发送响应数据 "Hello World"
response.end('Hello World\n');
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

http es un módulo web integrado de nodo

Ingrese el comando en el símbolo del sistema

node demo4.js

Después de que se inicie el servicio, abrimos el navegador e ingresamos la URL
http://localhost:8888/

Puede ver el resultado de salida de la página web Hello World

Presione Ctrl+c en la línea de comando para finalizar la ejecución.

1.3.6 Comprender la representación del lado del servidor

Cree demo5.js y escriba el ejemplo anterior en forma de bucle

var http = require('http');
http.createServer(function (request, response) {
    //发送 HTTP 头部
    //HTTP 状态值: 200 : OK
    //内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    //发送响应数据 "Hello World"
    for(var i=0;i<10;i++){
        response.write('Hello World\n');
    }
    response.end('');
}).listen(8888);
//终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

Ingrese el comando en el símbolo del sistema para iniciar el servicio

node demo5.js

Ingrese http://127.0.0.1:8888 en la barra de direcciones del navegador para ver los resultados de la consulta.

Haga clic con el botón derecho en "Ver código fuente" y descubra que no hay una declaración de bucle for que escribimos, sino 10 Hello World directos, lo que significa que este bucle se completa en el lado del servidor, no en el navegador (lado del cliente). Esto es muy similar a JSP.

1.3.7 Parámetros de recepción

Crear demo6.js

//引入http模块
var http = require("http");
var url = require("url");
//创建服务，监听8888端口
http.createServer(function (request, response) {
    
    //发送http头部
    //http响应状态200
    //http响应内容类型为text/plain
    response.writeHead(200, {"Content-Type": "text/plain"});
    //解析参数
    //参数1:请求地址; //参数2:true时query解析参数为一个对象，默认false
    var params = url.parse(request.url, true).query; //将所有请求参数输出
    for (var key in params) {
        response.write(key + " = " + params[key]);
        response.write("\n");
    }
    response.end("");
}).listen(8888);
console.log("Server running at http://127.0.0.1:8888 ")

Ingrese el comando en el símbolo del sistema

node demo6.js

Visite http://127.0.0.1:8888?id=123&name=zhangsan en el navegador Resultado de la prueba:

2. Explorador de paquetes NPM

2.1 ¿Qué es la NGP?

npm significa Node Package Manager, que es una herramienta de administración y distribución de paquetes de nodos. De hecho, podemos entender a NPM como el Maven front-end.

A través de npm, puede descargar fácilmente bibliotecas js y administrar proyectos front-end.

Ahora que node.js ha integrado la herramienta npm, ingrese npm -v en el símbolo del sistema para ver la versión actual de npm

2.2 Comandos NPM

2.2.1 Proyecto de Inicialización

El comando init es un comando de inicialización del proyecto. Cree una carpeta vacía o en el proyecto de ejemplo anterior, ingrese la carpeta en el símbolo del sistema y ejecute la inicialización del comando

npm init

Ingrese la información relevante cuando se le solicite, o simplemente presione Entrar si se usa el valor predeterminado.

nombre: nombre del proyecto

versión: número de versión del proyecto

descripción: descripción del artículo

palabras clave: {Array} palabras clave, fáciles para que los usuarios busquen nuestros proyectos

Finalmente, se generará un archivo package.json, que es el archivo de configuración del paquete, que es equivalente al pom.xml de maven y se puede modificar según sea necesario.

 

2.2.2 Instalación local

El comando de instalación se usa para instalar un módulo, que se puede introducir en el proyecto a través de require. Si queremos instalar el módulo express (framework web del nodo), el comando de salida es el siguiente:

npm install express
--如果下载慢可以参考本章2.2.5小结,使用cnpm淘宝镜像
--cnpm install express

Aparece un mensaje de advertencia, puede ignorarlo, puede estar seguro de que ha ejecutado correctamente el comando.

Una carpeta node_modules y package-lock.json han aparecido en este directorio

La carpeta node_modules se usa para almacenar la biblioteca js descargada (equivalente al almacén local de maven)

package-lock.json es un archivo que se genera automáticamente cuando cambia node_modules o package.json. La función principal de este archivo es determinar las dependencias de los paquetes instalados actualmente, de modo que se generarán las mismas dependencias durante la reinstalación posterior, ignorando las actualizaciones que se han producido en algunas dependencias durante el proceso de desarrollo del proyecto (puede haber cambios en diferentes fuentes espejo, las mismas grandes Puede haber problemas de compatibilidad con el número de versión, el bloqueo del paquete puede garantizar que incluso si se cambia la fuente, el archivo descargado se puede mantener igual que el original).

Abrimos el archivo package.json nuevamente y encontramos que el expreso descargado hace un momento se agregó a la lista de dependencias.

Acerca de la definición del número de versión:

指定版本:比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。

波浪号(tilde)+指定版本:比如~1.2.2，表示安装1.2.x的最新版本(不低于1.2.2)，但是不安装1.3.x，也就
是说安装时不改变大版本号和次要版本号。

插入号(caret)+指定版本:比如ˆ1.2.2，表示安装1.x.x的最新版本(不低于1.2.2)，但是不安装2.x.x，也就 是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。

latest:安装最新版本。

2.2.3 Instalación global

Solo usamos la instalación local, que instalará la biblioteca js en el directorio actual, y la instalación global instalará la biblioteca en su directorio global. Después de la instalación global, puede usar los contenidos o comandos correspondientes a los módulos instalados en la línea de comandos.

Si no sabe dónde está su directorio global, ejecute el comando para ver la ruta del directorio global

npm root -g

El directorio global predeterminado de WINDOWS está en

C:\Usuarios\su nombre de usuario\AppData\Roaming\npm\node_modules

El directorio global predeterminado de MAC está en

/usr/local/lib/node_modules

Por ejemplo, para instalar jquery globalmente, ingrese el siguiente comando

# 安装之后在全局目录下会存在对应的jquery目录，其里面的dist则包含有对应的jquery.js文件
npm install jquery -g

Aviso:

El autor está usando un sistema Mac. Cuando se le indique que los permisos son insuficientes, use el comando sudo -s para cambiar al usuario root

windows necesita ejecutar cmd como administrador

2.2.4 Descarga por lotes

Descargue un código de Internet y descubra que solo hay package.json y no hay una carpeta node_modules. En este momento, debe volver a descargar estas bibliotecas js a través del comando.

Ingrese el directorio (el directorio donde se encuentra el paquete.json) e ingrese el comando

npm install

En este punto, npm descargará automáticamente la biblioteca js dependiente en package.json.

2.2.5 Cambio de espejos NPM

A veces usamos npm para descargar recursos muy lentamente, por lo que podemos cambiar la fuente del espejo descargado (como: espejo Taobao); o instalar un cnmp (especifique el espejo Taobao) para acelerar la velocidad de descarga.

1. Si usa el método de cambiar fuentes espejo, puede usar una herramienta: nrm

Primero instale nrm, donde -g significa instalación global

# 管理员身份 打开cmd执行如下命令
npm install nrm -g

Luego use el comando nrm ls para ver la lista de repositorios npm, el que tiene * es el repositorio espejo actualmente seleccionado:

 Especifique la fuente del espejo que usará nrm use taobao:

 

2. Si usa cnpm, primero instale cnpm e ingrese el siguiente comando

# 如果不使用nrm 切换，可以在安装cnpm的时候指定镜像仓库
npm install -g cnpm --registry=https://registry.npm.taobao.org

Después de la instalación, podemos usar el siguiente comando para verificar la versión de cnpm

cnpm -v

 usar cnpm

cnpm install 需要下载的js库;一般只有在下载模块的时候才使用cnpm，其它情况还是一样使用npm;

2.2.6 Instrucciones de ingeniería de operación

Si queremos ejecutar un proyecto, use el comando ejecutar

Si los scripts definidos en package.json tienen:

• dev es la ejecución de prueba de la fase de desarrollo
• build es construir y compilar el proyecto
• lint es para ejecutar la detección de código js

Formato de comando de tiempo de ejecución:

npm run dev或者build或者lint

2.2.7 Compilar descripción del proyecto

El código compilado se colocará en la carpeta dist, ingrese el símbolo del sistema e ingrese el comando

npm run build

生成后会发现只有个静态页面，和一个static文件夹
这种工程我们称之为单页Web应用(single page web application，SPA)，就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
这里其实是调用了webpack来实现打包的，关于webpack下面的章节将进行介绍。

3. Introducción a Webpack

3.1 ¿Qué es Webpack?

Webpack es una herramienta de carga/empaquetado de activos de front-end. Realizará un análisis estático de acuerdo con las dependencias de los módulos y luego generará los recursos estáticos correspondientes para estos módulos de acuerdo con las reglas especificadas. webpackjs

 Como podemos ver en la figura, Webpack puede convertir una variedad de recursos estáticos js, css, etc. en un archivo estático, lo que reduce las solicitudes de página. A continuación, presentaré brevemente la instalación y el uso de Webpack.

3.2 Instalación del paquete web

Instalar globalmente

npm install webpack -g
npm install webpack-cli -g

Si la instalación falla, elimine la carpeta correspondiente de webpack en el directorio global y ejecute el comando anterior

 Compruebe el número de versión después de la instalación

webpack -v

3.3 Inicio rápido

3.3.1 Empaquetado JS

(1) Cree la carpeta src y cree bar.js

exports.info=function(str){
   document.write(str);
}

(2) Crear logic.js bajo src

exports.add=function(a,b){
    return a+b;
}

(3) Crear main.js bajo src

var bar= require('./bar');
var logic= require('./logic');
bar.info( '100 + 200 = '+ logic.add(100,200));

(4) Cree un archivo de configuración webpack.config.js, que se encuentra en el mismo directorio que src

var path = require("path");
//exports 就是 module.exports，
// 但是这里直接是赋值，所以不能直接使用exports，否则exports就不是module.exports了
module.exports = {
//入口文件
    entry: "./src/main.js", output: {
        //__dirname 是node的一个全局变量，获得当前文件所在目录的完整目录名
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    }
}

El código anterior significa: lea el contenido main.js (archivo de entrada) en la carpeta src en el directorio actual, empaquete el archivo js correspondiente, coloque el archivo empaquetado en la carpeta dist del directorio actual y empaquete el archivo js El archivo el nombre es paquete.js

  (5) Ejecute el comando de compilación

 (7) Cree index.html y haga referencia a bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <title>nodejs测试</title>
<script src="dist/bundle.js"></script>
</head>
<body>
</body>
</html>

Acceda al archivo index.html en el navegador y encontrará que hay salida de contenido.

3.3.2 Empaquetado CSS

(1) Instale style-loader y css-loader
Webpack solo puede procesar módulos de JavaScript. Si desea procesar otros tipos de archivos, debe usar loader para la conversión.

Loader puede entenderse como un conversor de módulos y recursos, en sí mismo es una función que acepta archivos fuente como parámetros y devuelve el resultado de la conversión. De esta forma, podemos cargar cualquier tipo de módulo o archivo, como CoffeeScript, JSX, LESS o imágenes, a través de require. En primer lugar, necesitamos instalar el complemento Loader correspondiente, css-loader es para cargar css en javascript; style-loader es para que javascript sepa css

cnpm install style-loader css-loader --save-dev

-save significa instalar el módulo en el directorio del proyecto y escribir las dependencias en el nodo de dependencias del archivo del paquete. Al ejecutar npm install --production
o especificar el valor de la variable NODE_ENV como producción, el módulo se descargará automáticamente en el directorio node_modules.

-save-dev significa instalar el módulo en el directorio del proyecto y escribir dependencias en el nodo devDependencies del archivo del paquete. Al ejecutar npm install --production o especificar el valor de la variable NODE_ENV como producción, el módulo no se descargará automáticamente en el directorio node_modules.

cnpm install less less-loader --save-dev

 (2) Modificar webpack.config.js

var path = require("path");
//exports 就是 module.exports，
// 但是这里直接是赋值，所以不能直接使用exports，否则exports就不是module.exports了
module.exports = {
    //入口文件
    entry: "./src/main.js",
    output: {
        //__dirname 是node的一个全局变量，获得当前文件所在目录的完整目录名
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
        }
        ]
    }
}

(3) Cree una carpeta css en la carpeta src y cree css1.css en la carpeta css

body {
    background-color: blue;
}

 (4) Modificar main.js e introducir css1.css

(5) Vuelva a ejecutar el paquete web

(6) Ejecute index.html para ver si el fondo se vuelve azul.