Aplicaciones JavaScript modernas con Neutrino -

PorEli Perelman es

Utilice herramientas que aprovechen el poder de Webpack con la facilidad de ajustes preestablecidos simples para iniciar rápidamente proyectos de JavaScript, todo sin configuración inicial.

Dar el paso de iniciar un nuevo proyecto JS a menudo conlleva un esfuerzo significativo para preparar su entorno antes de comenzar el desarrollo del proyecto. Muchos desarrolladores prefieren utilizar funciones de vanguardia y flujos de trabajo de herramientas modernas para que el proceso sea agradable. Desafortunadamente, este enfoque a menudo puede tener una curva de aprendizaje bastante grande, ya que las personas dedican tiempo a investigar las mejores prácticas, seguir tutoriales de configuración complejos y experimentar con modelos estándar. ¿Qué pasaría si pudiéramos tomar el trabajo que la comunidad ha realizado para configurar sus propios proyectos y capturarlo en paquetes compartibles que cualquiera pudiera usar? Por eso creamos Neutrino.

Neutrino es una herramienta que combina el poder de construcción y configuración de Webpack y agrega la capacidad de construir proyectos basados ​​en JavaScript con ajustes preestablecidos. Un ajuste preestablecido es el componente fundamental de Neutrino. Con él, puede complementar un proyecto con una serie de características que incluyen cómo se compila, garantizar la calidad del código e incluso agregar pruebas rápidamente. Al dividir la configuración en unidades componentes, podemos fomentar un ecosistema en el que la personalización de un proyecto se vuelve plug and play.

Para tener una idea de lo fácil que es comenzar con Neutrino, explicaré la creación de un par de proyectos simples.

Nota: En los próximos ejemplos, estoy usando el administrador de paquetes Yarn para instalar dependencias y crear scripts. Esta es solo mi preferencia personal y usted es libre de utilizar el cliente npm si lo desea.

Inicio rápido de Node.js

Espera, ¿puedes usar Neutrino para construir Node.jsapps?

Para comenzar con nuestro primer proyecto Node.js basado en Neutrino, usaremosneutrino-preset-node. Según su documentación permite:

• Sin configuración inicial y anulaciones sencillas si es necesario
• Se compila para admitir Node.js v6.9+, módulos ES y funciones asíncronas
• Mapas de fuentes cableados automaticamente

Genial, ¡comencemos!

En primer lugar, necesitamos un directorio desde el que empezar a trabajar. Desde su terminal, cree un nuevo directorio y cámbiese a él. Luego vamos a instalar neutrinoy neutrino-preset-nodecomo dependencias de desarrollo.

❯ mkdir proyecto cd proyecto❯ hilo agregar --dev neutrino neutrino-preset-node

De forma predeterminada, el ajuste preestablecido de Node.js busca el código fuente en un srcdirectorio, siendo el punto de entrada principal index.js. Creemos este archivo y edítelo, solo con un simple servidor HTTP que reproduzca todo lo que le enviemos.

import { createServer } from 'http';const port = process.env.PORT || 3000;createServer(({ url }, response) = {  console.log(`Received message at ${url}`);  response.end(url.slice(1));}).listen(port, () = console.log(`Running on :${port}`));

Next, let’s add a couple scripts to our package.json which will give us some easy commands to start and build our app:

{  "scripts": {    "start": "neutrino start --presets neutrino-preset-node",    "build": "neutrino build --presets neutrino-preset-node",    "serve": "yarn start  node build"  },  "devDependencies": {    "neutrino": "^4.0.1",    "neutrino-preset-node": "^4.0.1"  }}

We are ready to start our app! Using yarn serve in one terminal, and curl in another, we can see our code in action:

❯ yarn serveWarning: This preset does not support watch compilation. Falling back to a one-time build.Hash: 8fa3faf9cbe8ca235884Version: webpack 2.2.1Time: 632ms       Asset     Size  Chunks             Chunk Names    index.js   3.6 kB       0  [emitted]  indexindex.js.map  3.53 kB       0  [emitted]  indexRunning on :3000---❯ curl http://localhost:3000/Hello!Hello!

That’s it?!

Yep. That’s it.

No upfront cost needed to start your project with a completely modern toolchain.

React Quickstart

Okay, I’ll admit that was simple enough. But certainly a complex environment like React needs more than this,right?

For fun, let’s just change this project from Node.js to React. According to theNeutrino documentation, the React preset features:

• JSX syntax, ES Modules, support for last 2 browser versions, and Async Functions
• Support for import CSS, HTML, images, fonts, and icons directly from JavaScript
• Hot module replacement, no HTML templating, and much more

Let’s swap presets and install some React dependencies.

❯ yarn remove neutrino-preset-node  yarn add --dev neutrino-preset-react❯ yarn add react react-dom

Our package.json commands need to be changed to use the React preset now:

{  "scripts": {    "start": "neutrino start --presets neutrino-preset-react",    "build": "neutrino build --presets neutrino-preset-react"  },}

Instead of creating a Node.js server, let’s render some content to a web app. By convention our preset allows us to mount our application at ID “root”:

import React from 'react';import { render } from 'react-dom';render((  main    h1Hello!  /h1  /main), document.getElementById('root'));

Back to the terminal, and we can start up our app, and load it up in the browser:

❯ yarn start✔ Development server running on: http://localhost:5000✔ Build completed

Hopefully that demonstrates how simple it is to get up and running with a new React project! If you aren’t working with React for your web project, consider using neutrino-preset-web for other libraries or generic web applications.

Multiple presets

Neutrino makes it simple to compose multiple presets together. To demonstrate, let’s add a linting preset which will conform our project to theAirbnb style guide. Install neutrino-preset-airbnb-base:

❯ yarn add --dev neutrino-preset-airbnb-base

To reduce some repetition, we are going to take advantage of a Neutrino feature which will pull from an array of presets in our package.json. This saves us from having to name all the presets we want to use for every command. Remove the presets from the script commands and move them to config.presets.

{  "config": {    "presets": [      "neutrino-preset-airbnb-base",      "neutrino-preset-react"    ]  },  "scripts": {    "start": "neutrino start",    "build": "neutrino build"  }}

Note: neutrino-preset-airbnb-base needs to be loaded before our React presetaccording to the documentation.

If we modify our code and introduce something in violation of the preset, we are clearly notified in the console:

❯ yarn start✔ Development server running on: http://localhost:5000✔ Build completedERROR in ./src/index.js/node-project/src/index.js  6:10  error  Strings must use singlequote  quotes✖ 1 problem (1 error, 0 warnings)

I’m starting to sense a patternhere…

Testing, too!

Let’s quickly add a simple Jest test, because why not? TheNeutrino preset neutrino-preset-jest uses a convention of a test directory, with some expectations on file extensions:

❯ yarn add --dev neutrino-preset-jest❯ mkdir test  touch test/add.test.js❯ touch src/add.js

Let’s write a quick test which verifies a function correctly performs simple addition, which we will shortly create:

import add from '../src/add';describe('addition', () = {  it('adds 2 numbers', () = {    expect(add(3, 5)).toBe(8);  });});

Now our addition module in src/add.js:

export default (x, y) = x + y;

Edit the package.json once more, adding the Jest preset to our list, along with a command to run tests:

{  "config": {    "presets": [      "neutrino-preset-airbnb-base",      "neutrino-preset-react",      "neutrino-preset-jest"    ]  },  "scripts": {    "start": "neutrino start",    "build": "neutrino build",    "test": "neutrino test"  }}

Let’s run the test!

❯ yarn test PASS  test/add.test.js  addition    ✓ adds 2 numbers (3ms)Test Suites: 1 passed, 1 totalTests:       1 passed, 1 totalSnapshots:   0 totalTime:        1.228sRan all test suites.

If we had made a mistake writing our addition module and accidentally used multiplication:

export default (x, y) = x * y;

This would have caused the test to fail:

❯ prueba de hilo FAIL test/add.test.js ● suma › agrega 2 númerosesperado(recibido).toBe(esperado)El valor esperado será (usando ===): 8 Recibido: 15en Objeto.anónimo (prueba/add.test. js:5:38) en process._tickCallback (internal/process/next_tick.js:103:7)adición ✕ agrega 2 números (5ms)Conjuntos de pruebas: 1 fallido, 1 totalPruebas: 1 fallido, 1 totalInstantáneas: 0 tiempo total: 1.221 s Ejecutó todos los conjuntos de pruebas.

Modificando la construcción

Una de las grandes características de Neutrino es que no es necesario cambiar la simplicidad por el bloqueo o la falta de extensibilidad. Si sigue ladocumentación, puede complementar el proceso de creación de su proyecto con funciones adicionales que no vienen con su ajuste preestablecido. Si descubre que utiliza estas funciones o cambios en varios proyectos, puede incorporarlos a supropio ajuste preestablecido y compartirlo con su equipo y la comunidad.

Conclusión

Convertir Neutrino en la herramienta que es hoy ha sido un trabajo duro, pero esperamos que lo disfrutes. Pruébelo en sus proyectos, envíe comentarios, cree sus propios ajustes preestablecidos y compártalos con otros. Queremos que todos tengan éxito con Neutrino.

Si desea participar en el desarrollo o la documentación, visite la sección de contribuciones de los documentos para obtener detalles completos o visite nuestro repositorio de GitHub.

Documentación de neutrinos: https://neutrino.js.org/

Neutrino GitHub: https://github.com/mozilla-neutrino/neutrino-dev

¡Gracias!
Eli Perelman Hassan Ali — Mozilla

Acerca de Eli Perelman

Eli Perelman es un obsessionalista™ de JavaScript y Node.js y actualmente trabaja en herramientas web para el equipo de productividad de lanzamiento de Mozilla. En su tiempo libre le gusta trabajar en código abierto y experimentar con la producción de música electrónica. Hijo de la web de los 90. Escéptico.

eliperelman.com eliperelman Publicaciones