Mi objetivo con este artículo era establecer una configuración simple que luego se pueda desarrollar. Ha sido una lucha para entender Webpack.
Lo que planeo hacer es hacer una funcionalidad de búsqueda con algunos datos JSON falsos (o reales). En esta publicación de escuelajavascript.com, pasaré por la configuración de mi proyecto.
Haz un nuevo proyecto y cd en él:
mkdir react_search cd react_search
Crea un archivo package.json :
npm init
Si desea omitir todas las preguntas, agregue la marca -y:
npm init -y
Necesitamos instalar webpack como una dependencia dev y webpack-cli para que puedas usar webpack en la línea de comandos:
npm i webpack webpack-cli -D
- i: instalar
- -D: – save-dev
Crea una carpeta src con index.js y coloca el siguiente código como ejemplo:
console.log ("hola");
Ahora agrega los siguientes scripts a tu package.json:
[/php]
{
«name»: «react_search»,
«version»: «1.0.0»,
«description»: «Buscar aplicación usando React»,
«main»: «index.js»,
«scripts»: {
«start»: » webpack –mode development «,
» build «:» webpack –mode production »
},
» keywords «: [],
» author «:»,
«license»: «ISC»,
«devDependencies»: {
«webpack» : «^ 4.0.1»,
«webpack-cli»: «^ 2.0.10»
}
}
[/php]
El Webpack 4 ahora tiene dos modos; desarrollo y producción donde el código se minimiza en este último.
Velo por ti mismo, ejecutando:
npm run start
Esto creará una carpeta dist con el archivo main.js dentro (que contiene tu código src).
Ahora ejecuta:
npm run build
Configurando React y Babel
Para trabajar con React, necesitamos instalarlo junto con Babel. Esto transferirá el código de ES6 a ES5, ya que no todos los navegadores son compatibles con ES6 todavía (por ejemplo, Internet Explorer).
Instalar React, y React como una dependencia.
npm reacciono reaccion-dom -S
Luego instala babel-core , babel-loader , babel-preset-env y babel-preset-react como una dependencia dev:
npm i babel-core babel-loader babel-preset-env babel-preset-reaccion -D
- babel-core: transforma tu código ES6 en ES5
- babel-loader: asistente de paquete web para transformar tus dependencias de JavaScript (por ejemplo, cuando importas sus componentes a otros componentes) con Babel
- babel-preset-env: determina qué transformaciones / complementos usar y polyfills (proporciona funcionalidad moderna en navegadores antiguos que no lo admiten de forma nativa) en función de la matriz de navegador que deseas admitir
- babel-preset-react: Babel preset para todos los complementos React, por ejemplo, para convertir JSX en funciones
Necesitamos crear un archivo webpack.config.js para establecer las reglas para nuestro cargador de babel.
Luego necesitamos hacer un archivo separado llamado .babelrc para proporcionar las opciones para babel-loader. Puedes incluirlo en el archivo webpack.config.js, pero he visto que la mayoría de los proyectos tienen esto separado. Esto da como resultado una legibilidad más clara, y puede ser utilizado por otras herramientas no relacionadas con el paquete web. Cuando declares que está usando babel-loader en la configuración de tu paquete web, buscará el archivo .babelrc si hay uno.
A continuación, cambia su archivo index.js para representar un componente:
También necesitaremos crear un archivo index.html en la carpeta src donde podemos agregar nuestro elemento de sección con id index. Aquí es donde representamos nuestro principal componente de React:
Ahora necesitamos instalar html-webpack-plugin y usarlo en nuestro archivo de configuración de webpack. Este complemento genera un archivo HTML con <script> inyectado, lo escribes en dist / index.html y minimiza el archivo.
Instala html-webpack-plugin como una dependencia de desarrollo:
npm i html-webpack-plugin -D
Actualiza la configuración del webpack de esta manera:
plugins: [
new HtmlWebPackPlugin ({
template: "./src/index.html",
nombre de archivo: "./index.html"
});
El valor que le estoy dando a la clave template es donde busco mi archivo HTML. El valor del nombre de archivo es el nombre del HTML minificado que se generará en la carpeta dist.
Si ejecutas ahora npm run start, deberías ver que se genera index.html en la carpeta dist.
Ejecuta open dist/index.html y deberías ver «Hello React» en tu navegador.
La creación de webpack-dev-servidor
Es un poco tedioso seguir ejecutando este comando cada vez que quieras ver sus cambios en el navegador. Para que el webpack «vea» nuestros cambios y, por lo tanto, se actualice cada vez que hemos realizado cambios en cualquiera de nuestros componentes, podemos usar el módulo webpack-dev-server.
Adelante, instala esto como una dependencia de desarrollo.
npm i webpack-dev-server -D
Luego, cambia los scripts de inicio de package.json así:
{
"name": "react_search",
"version": "1.0.0",
"description": "Buscar aplicación usando React",
"main": "index.js",
"scripts": {
"start": " webpack-dev-server --mode development --open ",
" build ":" webpack --mode production "
},
" keywords ": [],
" author ":" ",
" license ":" ISC ",
" dependencias ": {
" reaccionar ":" ^ 16.2.0 ",
" reaccion-dom ":" ^ 16.2.0 "
" devDependencies ": {
" babel-core ":" ^ 6.26.0 ",
"babel-loader": "^ 7.1.4",
"babel-preset-env": "^ 1.6.1",
"babel-preset-react": "^ 6.24.1",
"html-webpack-plugin" : "^ 3.0.6",
"webpack": "^ 4.1.1",
"webpack-cli": "^ 2.0.10",
"webpack-dev-server": "^ 3.1.0"
}
}
Si ejecuta ahora npm run start deberías ver localhost: 8080 abrirse en tu navegador predeterminado, para eso está la bandera —-open. Ahora, cada vez que realices cambios, se actualizará la página.
También puedes agregar una bandera –hot a tu script de inicio npm que le permitirá recargar solo el componente que ha cambiado en lugar de realizar una recarga de página completa.
Configurando CSS
La última parte implica configurar nuestro CSS. Como importaremos archivos CSS en nuestros componentes React, necesitamos el módulo css-loader para resolverlos. Una vez que se haya resuelto, también necesitamos un cargador de estilo para inyectar esto en nuestro DOM, agregando una etiqueta <style> en el elemento <head> de nuestro HTML.
Continúa e instala ambos módulos como una dependencia de desarrollo:
npm i css-loader style-loader -D
Ten en cuenta que el orden de agregar estos cargadores es importante. Primero, debemos resolver los archivos CSS antes de agregarlos al DOM con el cargador de estilos. De forma predeterminada, el paquete web utiliza los cargadores de la derecha (último elemento de la matriz) a la izquierda (primer elemento de la matriz) .
Haciendo CSS modular
También podemos hacer CSS modular utilizando webpack. Esto significa que el nombre de la clase tendrá un alcance local y específico para solo el componente en cuestión.
Para hacer esto, podemos proporcionar algunas opciones para css-loader:
Como tenemos que dar opciones, cada cargador ahora es un objeto con un par clave-valor. Para habilitar los módulos CSS, necesitamos configurar la opción del módulo para que css-loader sea verdadero. La opción importLoaders configura cuántos cargadores deben aplicarse antes de css-loader. Por ejemplo, sass-loader tendría que venir antes que css-loader.
El localIdentName te permite configurar la identificación generada.
- [nombre] tomará el nombre de tu componente
- [local] es el nombre de tu clase / id
- [hash: base64] es el hash generado aleatoriamente que será único en el CSS de cada componente
Para hacer esto un poco más visual, te daré un ejemplo. Digamos que tienes un componente llamado Formy tengo un botón con una clase CSS primaryButton. También tengo otro componente llamado Searchy un botón en ella con una clase CSS primaryButton. Sin embargo, ambas clases tienen diferentes CSS:
/*Botón de formulario*/
.primaryButton {
background-color: green;
}
Botón de búsqueda
.primaryButton {
background-color: blue;
}
Cuando el paquete web agrupa su aplicación, dependiendo de qué CSS sea más reciente, ambos botones podrían tener el color verde o azul en lugar de la forma que tiene verde y la búsqueda con azul.
Aquí es donde el localIdentName entra en su lugar. Con esto, una vez que su aplicación esté empaquetada, ¡tus botones tendrán un nombre de clase único!
Como puedes ver, el nombre de la clase del botón en el componente Formulario es diferente al del componente Buscar: su nombre comienza con el nombre del componente, el nombre de la clase y el código hash único.
Por lo tanto, con esto, no tendrá que preocuparse por si ha dado el mismo nombre de clase en toda la aplicación; solo tiene que preocuparse por si lo ha usado en el mismo componente.
Esto concluye la primera parte de configurar una aplicación React desde cero. En la próxima publicación del blog, mi objetivo es explicar cómo configurar las pruebas para TDD y cómo escribirlas.
