Vue serie diez: uso de paquete web

10.1 ¿Qué es Webpack?

Esencialmente, webpack es un paquete de módulos estáticos para aplicaciones JavaScript modernas.
Cuando webpack procesa una aplicación, crea recursivamente un gráfico de dependencia que contiene todos los módulos que necesita la aplicación y luego agrupa todos esos módulos en uno o más paquetes. puede empaquetar muchos módulos débilmente acoplados en recursos front-end que cumplan con la implementación del entorno de producción de acuerdo con las dependencias y las reglas. También puede codificar módulos separados cargados a pedido y cargarlos de forma asincrónica cuando realmente se necesiten. A través de la conversión del cargador, se puede usar cualquier forma de recursos como módulos, como Commons JS, AMD, ES 6, CSS, JSON, Coffee Script, LESS, etc.
Con la marea de Internet móvil, cada vez más sitios web han cambiado. del modo web Evolucionado al modo WebApp. Se ejecutan en navegadores modernos y utilizan nuevas tecnologías como HTML 5, CSS 3, ES 6 para desarrollar funciones ricas. Las páginas web no son solo los requisitos básicos de los navegadores; WebApp suele ser un SPA (aplicación de página única), cada vista se carga de forma asincrónica, lo que lleva a que se cargue cada vez más código JS durante la inicialización y el uso de la página, lo que genera grandes desafíos para el proceso de desarrollo front-end y la organización de recursos.
La principal diferencia entre el desarrollo front-end y otros trabajos de desarrollo es que el front-end se basa en un trabajo de organización y codificación multilingüe y de varios niveles y, en segundo lugar, la entrega de productos front-end se basa en navegadores, y estos los recursos se ejecutan en el navegador a través de la carga incremental. , Cómo organizar estos códigos y recursos fragmentados en el entorno de desarrollo, y garantizar que se carguen y actualicen rápida y correctamente en el lado del navegador, requiere un sistema modular. Este sistema modular ideal es en lo que los ingenieros front-end han estado trabajando durante muchos años. Explore el rompecabezas.

10.2 Evolución modular

Etiqueta de secuencia de comandos

	<script src = "module1.js"></script>
	<script src = "module2.js"></script>
	<script src = "module3.js"></script>

Esta es la forma más primitiva de cargar archivos JavaScript.Si cada archivo se considera como un módulo, entonces sus interfaces suelen estar expuestas en el ámbito global, es decir, definidas en el objeto ventana, y la invocación de diferentes módulos es una función. área.
Este método de carga primitivo expone algunos inconvenientes obvios:

Es fácil causar conflictos de variables en el ámbito global.
Los archivos solo <script>se pueden cargar en el orden en que se escriben
Los desarrolladores tienen que resolver las dependencias del módulo y la base de código de forma subjetiva.
Varios recursos son difíciles de administrar en proyectos a gran escala, y la acumulación de problemas a largo plazo conduce al caos en la base de código.

CommonsJS

NodeJS en el lado del servidor sigue la especificación CommonsJS. La idea central de esta especificación es permitir que los módulos carguen sincrónicamente otros módulos de los que necesitan depender a través del método require, y luego exportan las interfaces que necesitan ser expuestas a través de exportaciones o módulo.exportaciones.

require("module");
require("../module.js");
export.doStuff = function(){};
module.exports = someValue;
1234

ventaja:

Módulos del lado del servidor para una fácil reutilización
Ya hay más de 450.000 paquetes disponibles en NPM
Fácil de usar

defecto:

El método de carga de módulo síncrono no es adecuado para el entorno del navegador. Síncrono significa bloquear la carga y los recursos del navegador se cargan de forma asíncrona.
No se pueden cargar varios módulos en paralelo sin bloquear

lograr:

NodeJS del lado del servidor
•Browserify, la implementación de CommonsJS en el lado del navegador, puede usar módulos NPM, pero los archivos compilados y empaquetados son de mayor tamaño
módulos-webmake, similar a Browserify, pero no tan flexible como Browserify
wreq, el predecesor de Browserify

AMD

La especificación de definición de módulo asincrónico en realidad tiene una definición de interfaz principal (¿id?, ¿dependencias?, fábrica); especifica todas las dependencias al declarar el módulo, y también lo pasa a la fábrica como un parámetro formal, y ejecuta los módulos dependientes por adelantado.

define("module",["dep1","dep2"],functian(d1,d2){
	return someExportedValue;
});
require（["module","../file.js"],function(module，file){});
1234

ventaja

Adecuado para cargar módulos de forma asíncrona en un entorno de navegador
Se pueden cargar varios módulos en paralelo

defecto

El costo de desarrollo aumenta, el código es difícil de leer y escribir, y la semántica del método de definición del módulo no es fluida.
No se ajusta a la mentalidad modular general y es una implementación de compromiso

lograr

RequerirJS
rizo

CMD

La especificación de definición del módulo Commons es muy similar a AMD, pero la mantiene simple y mantiene una gran compatibilidad con las especificaciones de los módulos CommonsJS y NodeJS.

define(function(require,exports,module){
	var $=require("jquery");
	var Spinning = require("./spinning");
	exports.doSomething = ...;
	module.exports=...;
});

ventaja:

La dependencia está cerca, ejecución retrasada
Se puede ejecutar fácilmente en NodeJS Contras
Depende del paquete SPM, y la lógica de carga del módulo es pesada

lograr

mar.js
culi

Módulos ES6

El estándar EcmaScript 6 agrega una definición de sistema de módulos en el nivel del lenguaje JavaScript. La idea de diseño de los módulos ES 6 es que sea lo más estático posible, de modo que las dependencias de los módulos y las variables de entrada y salida puedan determinarse en tiempo de compilación. Los módulos Commons JS y AMD, ambos solo pueden determinar estas cosas en tiempo de ejecución.

import "jquery"
export function doStuff(){}
module "localModule"{}

ventaja

Fácil análisis estático
Estándar Ecma Script preparado para el futuro

defecto

Los navegadores nativos aún no han implementado este estándar
Nuevos comandos, solo compatibles con la nueva versión de Node JS

lograr

Babel

El sistema de módulos esperado
es compatible con una variedad de estilos de módulos, y el código existente se puede usar tanto como sea posible, no solo la modularización de JavaScript, sino también CSS, imágenes, fuentes y otros recursos deben modularizarse.

10.3 Instalar paquete web

WebPack es una herramienta de empaquetado y cargador de módulos que puede procesar y utilizar varios recursos, como JS, JSX, ES 6, SASS, LESS, imágenes, etc., como módulos.
Instalar en pc:

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

La instalación de prueba fue exitosa

webpack -v
webpack-cli -v

configurar

Crear archivo de webpack.config.jsconfiguración

entrada: archivo de entrada, que especifica qué archivo utiliza Web Pack como entrada para el proyecto
salida: salida, especifique WebPack para colocar los archivos procesados en la ruta especificada
módulo: módulo, utilizado para procesar varios tipos de archivos
complementos: complementos, como: actualización en caliente, reutilización de código, etc.
resolver: establece la ruta para que apunte a
reloj: monitoreo, utilizado para configurar el paquete directamente después de que se cambia el archivo

module.exports = {
	entry:"",
	output:{
		path:"",
		filename:""
	},
	module:{
		loaders:[
			{test:/\.js$/,;\loade:""}
		]
	},
	plugins:{},
	resolve:{},
	watch:true
}

Ejecute webpackel comando directamente al paquete

10.4 Uso del paquete web

Crear proyecto
Cree un directorio llamado módulos para colocar archivos de recursos como módulos JS
Cree un archivo de módulo en módulos, como hello.js, para escribir código relacionado con el módulo JS

	//暴露一个方法：sayHi
	exports.sayHi = function(){
		document.write("<div>Hello Webpack</div>");
	}

Cree un archivo de entrada llamado main.js en los módulos para establecer el atributo de entrada al empaquetar

//require 导入一个模块，就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHi();

Cree el archivo de configuración webpack.config.js en el directorio del proyecto y use el comando webpack para empaquetar

module.exports = {
	entry:"./modules/main.js",
	output:{
		filename:"./js/bundle.js"
	}

}

Cree una página HTML en el directorio del proyecto, como index.html, e importe el archivo JS empaquetado por webpack

	<!doctype html>
	<html lang="en">
		<head>
			<meta charset="UTF-8">
			<title>狂神说Java</title>
		</head>
		<body>
			<script src="dist/js/bundle.js"></script>
		</body>
	</html>

Ejecute webpack directamente en la consola de IDEA; si falla, simplemente ejecútelo con privilegios de administrador.
Ejecute HTML para ver el efecto.

ilustrar

# 参数--watch 用于监听变化
webpack --watch