React
Cómo configurar un webpack básico, reaccionar y babel.
Buscar..
Observaciones
Este canal de compilación no es exactamente lo que llamaría "listo para la producción", pero le brinda un buen comienzo para que agregue las cosas que necesita para obtener la experiencia de desarrollo que está buscando. El enfoque que algunas personas adoptan (incluyéndome a mí mismo) es tomar una tubería completamente construida de Yeoman.io o en otro lugar y luego quitarle las cosas que no quieren hasta que se adapte al estilo. No hay nada de malo en esto, pero tal vez con el ejemplo anterior podría optar por el enfoque opuesto y acumularse a partir de los huesos.
Algunas cosas que le gustaría agregar son cosas como un marco de prueba y estadísticas de cobertura como Karma con Mocha o Jasmine. Lintado con ESLint. Reemplazo de módulos en caliente en webpack-dev-server para que pueda obtener esa experiencia de desarrollo de Ctrl + S, F5. Además, la tubería actual solo se compila en modo dev, por lo que una tarea de compilación de producción sería buena.
Gotchas!
Observe que en la propiedad de contexto de webpack.config.js hemos utilizado el módulo de ruta de nodo para definir nuestra ruta en lugar de simplemente concatenar __dirname a la cadena /src esto se debe a que Windows odia las barras diagonales . Entonces, para hacer que la solución sea más compatible con varias plataformas, use el nodo apalancamiento para ayudarnos.
Explicación de las propiedades webpack.config.js
contexto
Esta es la ruta de archivo que el paquete web utilizará como ruta raíz para resolver rutas de archivos relativas. Entonces, en index.jsx donde usamos require('./index.html') ese punto realmente se resuelve en el directorio src/ porque lo hemos definido como tal en esta propiedad.
entrada
Donde webpack busca primero para comenzar a agrupar la solución. Esta es la razón por la que verá que en el index.jsx estamos combinando la solución con requisitos e importaciones.
salida
Aquí es donde definimos donde webpack debería estar eliminando los archivos que ha encontrado para agrupar. También hemos definido un nombre para el archivo en el que se eliminarán nuestros estilos y javascript empaquetados.
devServer
Estas son configuraciones específicas para webpack-dev-server. La base de contentBase define donde el servidor debe hacer que sea su raíz, hemos definido la carpeta dist/ como nuestra base aquí. El port es el puerto en el que se alojará el servidor. open es lo que se usa para instruir a webpack-dev-server para que abra su navegador predeterminado una vez que haya girado el servidor.
módulo> cargadores
Esto define una asignación para el paquete web para usar, de modo que se sepa qué hacer cuando encuentre archivos diferentes. La propiedad de test otorga expresiones regulares para el paquete web para determinar si debe aplicar este módulo, en la mayoría de los casos tenemos coincidencias en las extensiones de archivo. loader o los loaders proporcionan el nombre del módulo del cargador que nos gustaría usar para cargar el archivo en el paquete web y dejar que el cargador se encargue de la agrupación de ese tipo de archivo. También hay una propiedad de query en el javascript, esto solo proporciona una cadena de consulta al cargador, por lo que probablemente podríamos haber usado una propiedad de consulta en el cargador html también si quisiéramos. Es solo una forma diferente de hacer las cosas.
Cómo construir una tubería para un "Hola mundo" personalizado con imágenes.
Paso 1: Instala Node.js
La canalización de compilación que construirá se basa en Node.js, por lo que debe asegurarse en primer lugar de que tenga esto instalado. Para obtener instrucciones sobre cómo instalar Node.js, puede consultar los documentos SO para eso aquí
Paso 2: Inicializa tu proyecto como un módulo de nodo
Abra su carpeta de proyectos en la línea de comandos y use el siguiente comando:
npm init
Para los propósitos de este ejemplo, puede sentirse libre de tomar los valores predeterminados o si desea obtener más información sobre lo que significa todo esto, puede consultar este documento SO sobre la configuración de paquetes.
Paso 3: Instalar los paquetes npm necesarios
Ejecute el siguiente comando en la línea de comandos para instalar los paquetes necesarios para este ejemplo:
npm install --save react react-dom
Luego, para las dependencias de desarrollo, ejecute este comando:
npm install --save-dev babel-core babel-preset-react babel-preset-es2015 webpack babel-loader css-loader style-loader file-loader image-webpack-loader
Finalmente, webpack y webpack-dev-server son cosas que vale la pena instalar globalmente en lugar de como una dependencia de su proyecto. Si prefiere agregarlo como una dependencia, eso funcionará, no lo hago. Aquí está el comando para ejecutar:
npm install --global webpack webpack-dev-server
Paso 3: Agregue un archivo .babelrc a la raíz de su proyecto
Esto configurará babel para usar los ajustes preestablecidos que acabas de instalar. Su archivo .babelrc debería verse así:
{
"presets": ["react", "es2015"]
}
Paso 4: Configurar la estructura de directorios del proyecto
Establézcase una estructura de directorio que se vea como la siguiente en la raíz de su directorio:
|- node_modules
|- src/
|- components/
|- images/
|- styles/
|- index.html
|- index.jsx
|- .babelrc
|- package.json
NOTA: Los node_modules , .babelrc y package.json deberían haber estado allí desde los pasos anteriores, simplemente los .babelrc para que pueda ver dónde encajan.
Paso 5: rellenar el proyecto con los archivos del proyecto Hello World
Esto no es realmente importante para el proceso de construcción de una tubería, así que solo le daré el código para que pueda copiarlos y pegarlos en:
src / components / HelloWorldComponent.jsx
import React, { Component } from 'react';
class HelloWorldComponent extends Component {
constructor(props) {
super(props);
this.state = {name: 'Student'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({name: e.target.value});
}
render() {
return (
<div>
<div className="image-container">
<img src="./images/myImage.gif" />
</div>
<div className="form">
<input type="text" onChange={this.handleChange} />
<div>
My name is {this.state.name} and I'm a clever cloggs because I built a React build pipeline
</div>
</div>
</div>
);
}
}
export default HelloWorldComponent;
src / images / myImage.gif
Siéntase libre de sustituir esto con cualquier imagen que le gustaría, simplemente está ahí para demostrar el punto en el que podemos agrupar las imágenes también. Si proporciona su propia imagen y le da un nombre diferente, tendrá que actualizar HelloWorldComponent.jsx para reflejar sus cambios. Del mismo modo, si elige una imagen con una extensión de archivo diferente, deberá modificar la propiedad de test del cargador de imágenes en webpack.config.js con la expresión regular correspondiente para que coincida con su nueva extensión de archivo.
src / styles / styles.css
.form {
margin: 25px;
padding: 25px;
border: 1px solid #ddd;
background-color: #eaeaea;
border-radius: 10px;
}
.form div {
padding-top: 25px;
}
.image-container {
display: flex;
justify-content: center;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learning to build a react pipeline</title>
</head>
<body>
<div id="content"></div>
<script src="app.js"></script>
</body>
</html>
index.jsx
import React from 'react';
import { render } from 'react-dom';
import HelloWorldComponent from './components/HelloWorldComponent.jsx';
require('./images/myImage.gif');
require('./styles/styles.css');
require('./index.html');
render(<HelloWorldComponent />, document.getElementById('content'));
Paso 6: Crear la configuración del webpack
Cree un archivo llamado webpack.config.js en la raíz de su proyecto y copie este código en él:
webpack.config.js
var path = require('path');
var config = {
context: path.resolve(__dirname + '/src'),
entry: './index.jsx',
output: {
filename: 'app.js',
path: path.resolve(__dirname + '/dist'),
},
devServer: {
contentBase: path.join(__dirname + '/dist'),
port: 3000,
open: true,
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loader: "style!css"
},
{
test: /\.gif$/,
loaders: [
'file?name=[path][name].[ext]',
'image-webpack',
]
},
{ test: /\.(html)$/,
loader: "file?name=[path][name].[ext]"
}
],
},
};
module.exports = config;
Paso 7: Crea tareas npm para tu pipeline
Para hacer esto, deberá agregar dos propiedades a la clave de scripts de JSON definida en el archivo package.json en la raíz de su proyecto. Haz que la clave de tus scripts se vea así:
"scripts": {
"start": "webpack-dev-server",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
El guión de test ya habrá estado allí y puede elegir si desea mantenerlo o no, no es importante para este ejemplo.
Paso 8: utilizar la tubería
Desde la línea de comandos, si se encuentra en el directorio raíz del proyecto, ahora debería poder ejecutar el comando:
npm run build
Esto agrupará la pequeña aplicación que ha creado y la colocará en el directorio dist/ que creará en la raíz de la carpeta de su proyecto.
Si ejecuta el comando:
npm start
Luego, la aplicación que haya creado se servirá en su navegador web predeterminado dentro de una instancia de servidor webpack dev.
