Empaquetar con NPM

Contactar con el profesor

  1. Creamos una carpeta en nuestro ordenador en la que añadiremos el código del módulo. Dentro de esta carpeta, crearemos la carpeta src, que es donde almacenaremos los ficheros fuente que vamos a compilar para que estos compilados sean accesibles a través de npm.

2.

npm init

3. Creamos el fichero cuyas funciones queremos exportar

./index.js
import Paneles from './components/paneles';

export {
    Paneles
};

4. Nos loqueamos con nuestra cuenta de npm:

npm login

5.

npm run build
npm publish

Tras ejecutar este comando aparecerá el paquete en nuestra cuenta de npm, en la sección packages. Cada vez que publiquemos, será necesario aumentar el número de versión.

  "version": "1.0.0",
  • El primer número implica cambios que hacen mi API incompatible
  • El segundo es para cambios que tienen compatibilidad hacia atrás
  • El tercer número es para corrección de errores

6. Ya podemos instalar el módulo en otro proyecto:

npm i modulo --save

Cargar nuestro módulo en otro proyecto

Si el proyecto donde vamos a cargar nuetro módulo ya tiene React (lo habitual), tendremos que tener el siguiente código en el webpack.config.js para evitar exportar React en el bundle.

webpack.config.js
module.exports = {
  entry: path.join(paths.SRC, 'index.js'),
  output: {
    // ..
    /* La siguiente línea hace la traducción de ES6 a commonjs
    commonJS es lo que utilizabamos para importar un módulo (mediante require) antes de ES6 
    */
    libraryTarget: 'commonjs2',
  },
  //..
  /*
Si el proyecto que el que vamos a importar nuestro módulo
ya utiliza React, debemos excluir estas librerías de la exportación utilizando el siguiente código:
*/ 
if (!development) {
  // Don't bundle react or react-dom
  module.exports.externals = {
    react: 'react',
    'react-dom': 'react-dom',
  };
}

Además hemos de especificar en el package.json que donde vayamos a importar nuestro módulo debe tener estas dependencias. Si no lo hacemos el módulo no funcionará en el caso de que fuese importado en un proyecto que no tuviese estas dependencias:

"peerDependencies": {
  "react": "16.9.0",
  "react-dom": "16.9.0"
},

Empaquetar imágenes y otros recursos estáticos (wav, ttf, etc) en un módulo

En general, en los módulos que crearemos para ser importados en otros proyectos no añadiremos recursos estáticos (imágenes, fuentes, sonidos, etc.).

Empaquetar estos recursos estáticos en el módulo supone los siguientes problemas:

  • La gestión correcta de la ruta del recurso, que difiere en cada proyecto en que va a ser importado el módulo (public_path) y que se complica bastante. Una solución sería cargar los recursos desde un servidor externo.
  • La importacción o extracción de los estáticos del módulo externo en nuestro propio proyecto, que también complica la lógica del código.

La mejor alternativa sería que pasar las rutas de los ficheros estáticos como prop desde el proyecto en el que ha sido importado el módulo.

Cargar un módulo localmente (sin publicarlo en npm)

Los pasos descritos anteriormente son comunes tanto para publicar en internet como para cargar un módulo directamente desde nuestro ordenador.

En el caso de que querramos cargar un módulo local:

  1. Tomamos nota del nombre que queremos importar. Este nombre, está en el package.json.
{
  "name": "malabares-core",

2. Ejecutamos el siguiente comando en la raíz del módulo que queremos importar

npm link

3. En el webpack.config.js del proyecto al que queremos hacer la importación, debemos tener el módulo resolve con el siguiente código:

 resolve: {
  extensions: ['.js'],
  symlinks: true,
  alias: {
    react: path.resolve('./node_modules/react'),
    'react-dom': path.resolve('./node_modules/react-dom')
  },
},

4. En la raíz de la aplicación en la que queremos importar nuestro módulo ejecutamos el siguiente comando:

npm link malabares-core
← Typescript
Añadir imagen destacada al publicar en facebook →

Aviso Legal | Política de privacidad