Cómo desarrollar mejores módulos de JavaScript

Muchas personas han publicado módulos JavaScript que han desarrollado en npm, y en el uso de algunos módulos, a menudo tengo la idea de "Este módulo es muy útil, pero sería mejor si pudiera xxx". Por lo tanto, este artículo se resume desde la perspectiva del usuario del módulo, cómo hacer que el módulo sea más útil.

Proporcionar ES6 La entrada del módulo

webpack y rollup ambos admiten ES6 Hacer algunas optimizaciones estáticas del módulo (por ejemplo, Tree Shaking y Scope Hoisting), que leerán primero el campo module en package.json como ES6 La entrada del módulo, si no hay module, se leerá el campo main como la entrada del módulo CommonJS. La práctica común es: usar ES6 Escribir código fuente en语法，luego usar herramientas de paquete de módulos y herramientas de conversión de语法 para generar módulos CommonJS y ES6 módulo, de modo que se puedan proporcionar tanto los campos main como module.

Proporcionar archivos de declaraciones de tipos de TypeScript

Si sus usuarios utilizan TypeScript pero sus módulos no proporcionan archivos de declaraciones, deberán agregar un fragmento de código en su proyecto para evitar errores de compilación de TypeScript; además, hacer esto no solo es amigable para los usuarios de TypeScript, ya que la mayoría de los editores de código (Webstorm, VS Code, etc.) pueden identificar las declaraciones de tipos de TypeScript y proporcionar sugerencias de código más precisas, y dar alertas cuando el usuario introduce la cantidad o tipo incorrecto de parámetros.

La mejor práctica es escribir tu módulo en TypeScript, ya que se generan automáticamente declaraciones de tipo durante la compilación. Además, también puedes referirte al documento para mantener manualmente un archivo de declaraciones. Puedes agregar un archivo index.d.ts en la carpeta raíz de tu módulo o declarar la ubicación del archivo de declaraciones en el campo typings de package.json.

Hacer que el módulo funcione tanto en Node.js como en el navegador

Puedes determinar si el módulo se está ejecutando en Node.js o en el navegador mediante la detección de si hay una variable global llamada window (por ejemplo, !!typeof window) y luego usar diferentes formas de implementar tus funcionalidades.

Este método es bastante común, pero si el usuario utiliza una herramienta de打包 de módulos, hacerlo llevará a que tanto la implementación de Node.js como la de navegador se incluyan en el archivo de salida final. En respuesta a este problema, la comunidad de código abierto propuso agregar el campo browser en package.json, y actualmente webpack y rollup ya lo soportan.

El campo browser tiene dos formas de uso:

Proporciona una ruta de archivo al campo browser para usar como punto de entrada del módulo en el lado del navegador, pero ten en cuenta que la herramienta de打包 priorizará la ruta de archivo especificada en el campo browser como punto de entrada del módulo, por lo que se ignorará el campo module, lo que llevará a que la herramienta de打包 no optimice tu código. Para más detalles, consulta este problema.

Si solo quieres reemplazar algunos archivos, puedes declarar un objeto.

Por ejemplo, supongamos que en tu módulo hay dos archivos: http.js y xhr.js, el primer archivo utiliza el módulo http de Node.js para enviar solicitudes, y el otro utiliza XMLHTTPRequest en el navegador para implementar la misma función. Para usar el archivo adecuado, tu código de módulo debe requerir(‘./path/to/http.js') y decláralo en package.json:

{
 "browser": {
  "./path/to/http.js": "./path/to/xhr.js"
 }
}

De esta manera, cuando tu módulo se utiliza en herramientas de打包, la herramienta de打包 solo incluirá el código de xhr.js en el archivo de salida final.

Arma tu proyecto con varios servicios

La mayoría de los proyectos de JavaScript son de código abierto, y la comunidad de código abierto también ofrece muchos servicios gratuitos para proyectos de código abierto, que pueden proporcionar una ayuda más poderosa a sus proyectos, aquí se enumeran algunos de los más comunes.

El servicio más utilizado en un proyecto es el de integración continua. Los servicios de integración continua pueden realizar tareas como pruebas, detección de estilo de código y empaquetado en el servidor y ejecutarlas automáticamente cuando envíes código, entre los más comunes están Travis CI, CircleCI y AppVeyor. Travis CI es gratuito para proyectos de código abierto y proporciona entornos de ejecución de Linux y OS X; CircleCI es gratuito para proyectos de código abierto y privados, pero tiene un límite mensual 15Límite de tiempo de ejecución de 00 minutos; AppVeyor proporciona un entorno de ejecución de Windows, que también es gratuito para proyectos de código abierto.

Después de ejecutar las pruebas, también puedes subir la cobertura de pruebas a Coveralls. Este servicio te permite ver en línea la cobertura de pruebas del código.

Si quieres que tu módulo sea completamente probado en todas las versiones y plataformas de navegadores, también puedes usar Sauce Labs y BrowserStack, que son gratuitos para proyectos de código abierto, pero necesitas enviar un correo electrónico para solicitarlos.

Por último, Shields IO ofrece varios iconos, que pueden proporcionar mucha información adicional a tu proyecto, incluyendo pero no limitado a el número de versión de npm, cantidad de descargas, estado de aprobación de pruebas, cobertura de pruebas, tamaño de archivo, dependencias caducas, etc.

Aquí está todo el contenido que compartimos con ustedes sobre cómo desarrollar módulos de JavaScript útiles, si tienen alguna duda, pueden discutir en la zona de comentarios a continuación. Gracias por tu apoyo a Tutorial de Gritos.

Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se realiza la edición humana y no asume la responsabilidad legal correspondiente. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplaza # con @) para denunciar y proporcionar evidencia. Si se verifica, este sitio eliminará inmediatamente el contenido sospechoso de infracción.