Saltar al contenido

Cómo crear un módulo de escritura y reacción

Typescript es un transpilador para un superconjunto del lenguaje Javascript. Ya que ahora escribiremos en un lenguaje diferente al Javascript, necesitamos establecer el paso de construcción que convertirá el código de Typescript a Javascript.

Configuración del proyecto

Instale Typescript en su proyecto ejecutándolo:

Cómo crear un módulo de escritura y reacción
Cómo crear un módulo de escritura y reacción

i -D mecanografía</pre
bash

A continuación, we'll setup Typescript creando el archivo de configuración tsconfig.json :

1234567891011121314151617181920212223{"CompiladorOpciones":{"fueraDir":"construir","módulo":"esnext","objetivo":"es5","lib": ["es6","dom","es2016","es2017"]," sourceMap":true,"allowJs":false,"jsx":"react","declaration":true,"moduleResolution": FuerzaCasosConsistentesEnNombresDeArchivos&punto;:verdadero,&punto;noImplícitosRetornos&punto;:verdadero,&punto;noImplícitosEsto&punto;:verdadero,&punto;noImplícitosCualquier&punto;:verdadero,&punto;estrictoCasosNulos&punto;: true,"suprimirCualquierError de Indice Implícito":true,"noLocalesNoUsados":true,"noParámetrosNoUsados":true},"incluir":["src"],"excluir":["nodo_módulos","construir"]}</pre
json

Estamos configurando algunos parámetros importantes aquí:

  1. outDir – donde colocar los archivos .js generados.
  2. objetivo – qué versión de ECMAScript a objetivo. Dado que Typescript es un superconjunto de Javascript, contiene características/sintaxis que no son soportadas por todos los proveedores de navegadores. Especificamos el objetivo de compilación para mantener la compatibilidad de sintaxis.
  3. sourceMap – mientras se transpone, Typescript puede generar un source-map para permitir el acceso al código original de Typescript durante la depuración en el archivo JS creado.
  4. declaración – El ecosistema tipográfico se construye alrededor del .d.ts, las llamadas Definiciones Tipo. Añadiendo esta bandera se generará el archivo .d.ts para usted e incluirá todos los tipos y funciones exportados en él.
  5. incluyen – donde buscar los archivos .ts (src).
  6. excluir – qué carpetas evitar (node_modules) – ya que no queremos transponer los módulos existentes y construir nuestra carpeta de salida.

Cambios de código

Comencemos por organizar nuestra carpeta correctamente creando una subcarpeta llamada src (la entrada para el compilador Typescript, como se especifica en la sección tsconfig.json include) y movamos index.js allí mientras lo renombramos a index.ts

A continuación, vamos a arreglar los errores de sintaxis que se produjeron debido a las opciones de rigor en el archivo tsconfig.json para que el index.ts se vea como:

123exportfunctiontestMethod(param:string){retorno"Hola "+ param;}</pre>
typoscript

Por último, vamos a añadir un paso de construcción para ejecutar el compilador de Typescript editando package.json y añadiendo un script de construcción:

1234" scripts":{" build":"tsc","test":"echo "Error: no se especificó ninguna prueba" "amp;quot; salida 1"},N-
json

Vamos a probarlo:

…1$ npm run build</pre
bash

Deberías ver una nueva carpeta llamada build con tres archivos en ella:

  1. index.js – el resultado de la compilación.
  2. index.js.map – el mapa de la fuente.
  3. index.d.ts – las definiciones de los tipos. Como hemos exportado una función, se incluirá en ella.

Pruebas

Para implementar las pruebas, we'usará el popular marco de trabajo Jest y su módulo de soporte de Typescript ts-jest.para agregarlo al proyecto, ejecute:

i -D ts-jest jest @types/jest</pre
bash

Entonces, edita package.json para activar el soporte de Jest's Typescript añadiendo:

1234 "jest":{"preset":"ts-jest","testEnvironment":"nodo"}</pre
json

y reemplazar

Error: no se ha especificado ninguna prueba..;
json

con

…1"1"test":"jest";;/pre
json

Ahora, vamos a crear un archivo de prueba llamado function.spec.ts en src/__tests__:

12345importar{ testMethod }de"..";test("crear un nuevo hola",()=>{espect(testMethod("World")).toBe("Hola World");});/pre
tipografía

Aquí, estamos importando la función testMethod y declarando una prueba que espera una llamada a testMethod con el parámetro &quo

1234567891011$ npmtest> jest PASS src/__tests__/function.spec.ts √ crear un nuevo hola (2ms)Test Suites: 1 pasado, 1 totalTests: 1 pasada, 1 totalSnapshots: 0 totalTime: 0.742s, estimado 2sRan todas las suites de pruebas.

bash

Prepararse para la publicación

Como he mencionado antes, el código de Typecript debe ser compilado hasta Javascript antes de ser publicado en el NPM. Para añadir confusión a este procedimiento, debemos ser conscientes de los diferentes formatos de módulos que existen en el ecosistema de Javascript.

  1. CommonJS – formato de módulo usado por Node (usando la función “Requerir”).
  2. ESM – formato de módulo moderno (usando sintaxis de importación).
  3. UMD – Universal Module Definition, un patrón para exportar módulos que debería funcionar en todas partes (no tan popular en estos días).

Así que, para poder soportar ambos, CommonJS y ESM simultáneamente, necesitaremos introducir un paso de construcción un poco más complicado reemplazando la llamada directa al compilador de Typescript con una herramienta de construcción llamada Rollup.Esta herramienta (similar a Webpack) ingerirá nuestro código de Typescript y escupirá el código Javascript en dos formatos de salida separados.añadamos Rollup y sus plugins requeridos a nuestro proyecto:

1$ npm i -D rollup-plugin-typescript2 rollup-plugin-commonjs rollup-plugin-peer-deps-external rollup-plugin-node-resolve

bash

Ahora, editemos nuestro archivo package.json para usar Rollup para la construcción:

1234 "scripts":{"build": "rollup -c", "test": "jest"},

json

Y apunte a los archivos de salida del rollup:

123 "main": "build/index.js", "module": "build/index.es.js", "jsnext:main": "build/index.es.js",

json

Estos ajustes (main, module y jsnext:main) serán utilizados por otros bundlers/herramientas que usarán nuestro paquete para recoger el formato apropiado para ellos.

Como último paso, crea un archivo de configuración de Rollup llamado rollup.config.js para que se vea como:

123456789101112131415161718192021222324252627282930313233343536373839404142434445importar tipografía de "rollup-plugin-typescript2";importar comúnjs de "rollup-plugin-commonjs";importar externo de "rollup-plugin-peer-deps-external";importar resolver de "rollup-plugin-node-resolve";importar pkg de". /package.json";exportar por defecto{ entrada: "src/index.ts", salida:[{ archivo: pkg. main, formato: "cjs", exporta: "named", sourcemap:true},{ archivo: pkg. module, format: "es", exports: "named", sourcemap:true}], plugins:[external(),resolve(),typescript({ rollupCommonJSResolveHack:true, exclude: "**/__tests__/**", clean:true}),commonjs({ include:["node_modules/**"], namedExports:{"node_modules/react/react. js":["Children", "Component", "PropTypes", "createElement"], "node_modules/react-dom/index.js":["render"]}})]};

javascript

¡Todo listo! Vamos a probarlo corriendo

1234567$ npm run build >[email protected] build > rollup -csrc/index.ts → build/index.js, build/index.es.js...created build/index.js, build/index.es.js in 141ms

bash

Ahora, si ejecutas npm pack puedes notar que nuestros archivos fuente también se incluyeron en el tarball resultante. Para evitar eso y para empaquetar sólo la carpeta de construcción, añade esto a tu paquete.json:

123 "files":["build"],

json