Entonces, lo que quiero preguntar es: ¿Hay alguna manera de convertir este archivo simple en una biblioteca que pueda funcionar con navegadores (etiqueta de secuencia de comandos), Node JS y aplicaciones de una sola página usando una base de código única?
Hasta ahora, todo lo que había estado haciendo era usar bibliotecas, pero nunca se me ocurrió que en realidad no es tan simple crear una. Estoy trabajando en una aplicación React donde creé un archivo de ayuda simple con exportaciones. Pensé "¿por qué no convertirlo en una biblioteca independiente en NPM?". Justo cuando comencé a probarlo de forma independiente en el entorno NodeJS, me di cuenta de que en realidad hay una gran diferencia en la forma en que ambos entornos realizan las importaciones.
Tengo un ligero conocimiento de Webpack, pero no sé cómo abordarlo. ¿Necesitaría diferentes códigos para diferentes entornos?
Otra cosa que me confundió fue cuando pensé en "¿Cómo importamos cosas/funciones de las bibliotecas?" Como cuando instalamos cualquier biblioteca desde NPM INSTALL y hacemos "importación {abc} de 'biblioteca'", ¿busca un archivo index.js en la carpeta de la biblioteca o qué? O en el caso de Node, "let lib = require('library')", ¿dónde se ve ya que es un entorno diferente al de SPA?
En conclusión, tengo un solo archivo simple que quiero lanzar en NPM como una biblioteca que podría funcionar en cualquier entorno.
Esta es una pregunta muy amplia, por lo que una respuesta muy amplia: mire herramientas como webpack , rollup y browserify , que a menudo se usan para hacer que las cosas de Node.js estén disponibles en el navegador.
Otra posibilidad es ver cómo se codifica un módulo como slug para que funcione en el navegador y en Node.js, pero requiere algunos trucos (y una configuración de prueba decente) para hacerlo. Por ejemplo, comprueba typeof window !== 'undefined' para cambiar entre el código que debe ejecutarse en el navegador y el código que debe ejecutarse en Node.js. Y este bit al final detecta el sistema de módulos que se está utilizando y actúa en consecuencia:
if (typeof define !== 'undefined' && define.amd) { // AMD define([], function () { return slug }) } else if (typeof module !== 'undefined' && module.exports) { // CommonJS module.exports = slug } else { // Script tag root.slug = slug }