El flujo de trabajo de Modlet: mejore su flujo de trabajo de desarrollo con StealJS | Programar Plus ▷ Tutoriales

Está convencido de los beneficios que proporciona el flujo de trabajo de modlet y desea comenzar a crear sus componentes con sus propias páginas de prueba y demostración. Ya sea que esté comenzando un nuevo proyecto o actualizando el actual, necesita un cargador de módulos y un paquete que no requiera configuración de compilación para cada página de prueba y demostración que desee crear.

StealJS es la respuesta. Puede cargar módulos de JavaScript en cualquier formato (AMD, CJS, etc.) y cargar otros tipos de archivos (Less, TypeScript, etc.) con complementos. Requiere una configuración mínima y, a diferencia del paquete web, no requiere una compilación para cargar sus dependencias en desarrollo. Por último, pero no menos importante, puede usar StealJS con cualquier biblioteca o marco de JavaScript, incluidos CanJS, React, Vue, etc.

En este tutorial, agregaremos StealJS a un proyecto, crearemos un componente con Preact, crearemos una página de demostración interactiva y crearemos una página de prueba.

Serie de artículos:

La clave para crear grandes aplicaciones de JavaScript: el flujo de trabajo de Modlet
Mejore su flujo de trabajo de desarrollo con StealJS (¡usted está aquí!)

1. Creando un nuevo proyecto

Si ya tiene un proyecto Node.js existente: ¡genial! Puede pasar a la siguiente sección donde agregamos StealJS a su proyecto.

Si aún no tiene un proyecto, primero asegúrese de instalar Node.js y actualizar npm. A continuación, abra su símbolo del sistema o aplicación de terminal para crear una nueva carpeta e inicialice un archivo `package.json`:

mkdir steal-tutorial
cd steal-tutorial
npm init -y

También necesitará un servidor web local para ver archivos estáticos en su navegador. El servidor http es una excelente opción si aún no tiene instalado algo como Apache.

2. Agregue StealJS a su proyecto

A continuación, instalemos StealJS. StealJS se compone de dos paquetes principales: robar (para cargar módulos) y robar herramientas (para agrupar módulos). En este artículo, nos vamos a centrar en robar. También vamos a usar Preact para construir un componente de encabezado simple.

npm install steal preact --save

A continuación, vamos a crear una carpeta `modlet` con algunos archivos:

mkdir header && cd header && touch demo.html demo.js header.js test.html test.js && cd ..

Nuestra carpeta `header` tiene cinco archivos:

demo.html para que podamos demostrar fácilmente el componente en un navegador
demo.js para el JavaScript de la demostración
header.js para el JavaScript principal del componente
test.html para que podamos probar fácilmente el componente en un navegador
test.js para el JavaScript de la prueba

Nuestro componente va a ser realmente simple: va a importar Preact y usarlo para crear un componente funcional.

Actualice su archivo `header.js` con lo siguiente:

import { h, Component } from "preact";

export default function Header() {
  return (
    <header>
      <h1>{this.props.title}</h1>
    </header>
  );
};

Nuestro componente aceptará un title propiedad y devolver un header elemento. En este momento no podemos ver nuestro componente en acción, así que creemos una página de demostración.

3. Crear una página de demostración

El flujo de trabajo del modlet incluye la creación de una página de demostración para cada uno de sus componentes para que sea más fácil ver su componente mientras trabaja en él sin tener que cargar toda su aplicación. Tener una página de demostración dedicada también le brinda la oportunidad de ver su componente en múltiples escenarios sin tener que verlos individualmente en su aplicación.

Actualicemos nuestro archivo `demo.html` con lo siguiente para que podamos ver nuestro componente en un navegador:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Header Demo</title>
  </head>
  <body>
    <form>
      <label>
        Title
        <input autofocus id="title" type="text" value="Header component" />
      </label>
    </form>
    <div id="container"></div>
    <script src="https://css-tricks.com/modlet-workflow-improve-development-workflow-stealjs/node_modules/steal/steal.js" main="header/demo"></script>
  </body>
</html>

Hay tres partes principales del cuerpo de nuestro archivo de demostración:

Un formulario con una entrada para que podamos cambiar dinámicamente el title pasado al componente
A #container para que el componente se convierta en
A script elemento para cargar StealJS y el archivo demo.js

Hemos agregado un main atribuir a la script elemento para que StealJS sepa dónde comenzar a cargar su JavaScript. En este caso, el archivo de demostración busca `header/demo.js`, que será responsable de agregar el componente al DOM y escuchar el valor del input cambiar.

Actualicemos `demo.js` con lo siguiente:

import { h, render } from 'preact';
import Header from './header';

// Get references to the elements in demo.html
const container = document.getElementById('container');
const titleInput = document.getElementById('title');

// Use this to render our demo component
function renderComponent() {
  render(<Header title={titleInput.value} />, container, container.lastChild);
}

// Immediately render the component
renderComponent();

// Listen for the input to change so we re-render the component
titleInput.addEventListener('input', renderComponent);

En el código de demostración anterior, obtenemos referencias a la #container y input elementos para que podamos agregar el componente y escuchar el valor de la entrada para cambiar. Nuestra renderComponent la función es responsable de volver a renderizar el componente; Inmediatamente llamamos a esa función cuando se ejecuta el script para que el componente aparezca en la página, y también usamos esa función como oyente para que cambie el valor de la entrada.

Hay una última cosa que debemos hacer antes de que nuestra página de demostración funcione: configure Babel y Preact cargando el complemento transform-react-jsx Babel. Puede configurar Babel con StealJS agregando esto a su `package.json` (de los documentos de Preact):

  ...

  "steal": {
    "babelOptions": {
      "plugins": [
        ["transform-react-jsx", {"pragma": "h"}]
      ]
    }
  },

  ...

Ahora, cuando cargamos la página `demo.html` en nuestro navegador, vemos nuestro componente y un formulario para manipularlo:

¡Estupendo! Con nuestra página de demostración, podemos ver cómo se comporta nuestro componente con diferentes valores de entrada. A medida que desarrollamos nuestra aplicación, podemos usar esta página de demostración para ver y probar solo este componente en lugar de tener que cargar toda nuestra aplicación para desarrollar un solo componente.

4. Crear una página de prueba

Ahora configuremos una infraestructura de prueba para nuestro componente. Nuestro objetivo es tener una página HTML que podamos cargar en nuestro navegador para ejecutar solo las pruebas de nuestro componente. Esto facilita el desarrollo del componente porque no tiene que ejecutar todo el conjunto de pruebas ni ensuciar el código de prueba con .only declaraciones que inevitablemente se olvidarán y se perderán durante la revisión del código.

Vamos a usar QUnit como nuestro ejecutor de pruebas, pero puede usar StealJS con Jasmine, Karma, etc. Primero, instalemos QUnit como una dependencia de desarrollo:

npm install qunitjs --save-dev

A continuación, creemos nuestro archivo `test.html`:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Header Test</title>
  </head>
  <body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
    <script src="https://css-tricks.com/modlet-workflow-improve-development-workflow-stealjs/node_modules/steal/steal.js" main="header/test"></script>
  </body>
</html>

En el HTML anterior, tenemos un par de div elementos para QUnit y un script elemento para cargar Steal y configurar nuestro archivo `test.js` como el punto de entrada principal. Si compara esto con lo que hay en la página de inicio de QUnit, notará que es muy similar, excepto que estamos usando StealJS para cargar el CSS y JavaScript de QUnit.

A continuación, agreguemos esto a nuestro archivo `test.js`:

import { h, render } from 'preact';
import Header from './header';
import QUnit from 'qunitjs';
import 'qunitjs/qunit/qunit.css';

// Use the fixture element in the HTML as a container for the component
const fixtureElement = document.getElementById('qunit-fixture');

QUnit.test('hello test', function(assert) {
  const message="Welcome to your first StealJS and React app!";

  // Render the component
  const rendered = render(<Header title={message} />, fixtureElement);

  // Make sure the right text is rendered
  assert.equal(rendered.textContent.trim(), message, 'Correct title');
});

// Start the test suite
QUnit.start();

Notará que estamos usando Steal para importar el CSS de QUnit. De forma predeterminada, StealJS solo puede cargar archivos JavaScript, ¡pero puede usar complementos para cargar otros tipos de archivos! Para cargar el archivo CSS de QUnit, instalaremos el complemento Steal-CSS:

npm install steal-css --save-dev

Luego actualice la configuración `package.json` de Steal para usar el steal-css enchufar:

{
  ...
  "steal": {
    "babelOptions": {
      "plugins": [
        ["transform-react-jsx", {"pragma": "h"}]
      ]
    },
    "plugins": [
      "steal-css"
    ]
  },
  ...
}

Ahora podemos cargar el test.html archivo en el navegador:

¡Éxito! Solo tenemos las pruebas para ese componente ejecutándose en nuestro navegador, y QUnit proporciona algunas funciones de filtrado adicionales para ejecutar pruebas específicas. A medida que trabaja en el componente, puede ejecutar solo las pruebas de ese componente, lo que le proporciona comentarios anteriores sobre si los cambios funcionan como se esperaba.

Recursos adicionales

¡Hemos seguido con éxito el patrón de modlet al crear demostraciones individuales y páginas de prueba para nuestro componente! A medida que hacemos cambios en nuestra aplicación, podemos probar fácilmente nuestro componente en diferentes escenarios usando la página de demostración y ejecutar solo las pruebas de ese componente con la página de prueba.

Con StealJS, se requería una cantidad mínima de configuración para cargar nuestras dependencias y crear nuestras páginas individuales, y no teníamos que ejecutar una compilación cada vez que realizábamos un cambio. Si está intrigado por qué más tiene para ofrecer, StealJS.com tiene información sobre temas más avanzados, como compilación para producción, carga progresiva y uso de Babel. ¡También puede hacer preguntas en los foros de Gitter o StealJS!

Gracias por tomarse el tiempo para seguir este tutorial. ¡Déjame saber lo que piensas en los comentarios a continuación!

Serie de artículos:

La clave para crear grandes aplicaciones de JavaScript: el flujo de trabajo de Modlet
Mejore su flujo de trabajo de desarrollo con StealJS (¡usted está aquí!)

(Visited 5 times, 1 visits today)