Empaquetar con NPM

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Aunque podemos subir un módulo de un proyecto creado con create-react-app a npm, no es lo ideal. En su lugar crearemos un proyecto de 0 para la subida a npm.

1. Ejecutamos:

npm init

2. Creamos la carpeta src, que tendrá dos cosas:

• La carpeta components con los componentes que deseamos subir a npm.
• Un fichero index.js que exporta los componentes que deseamos subir a npm.

./src/index.js

import Loginfrom './components/Login';

export {
    Login
};

3. Instalamos webpack:

npm i webpack --save-dev

4. Editamos el fichero de configuración de webpack:

webpack.config.js

const path = require("path");

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "main.js",
        libraryTarget: 'commonjs',
        path: path.resolve(__dirname, "build"),
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ["babel-loader"],
            },
        ],
    },
    resolve: {
        extensions: [".js", ".jsx"]
    },
    externals: {
        react: 'react', // Evita que React sea incluído en la exportación
    },
};

5. Añadimos el script de webpack al package.json:

  "scripts": {
        "build": "webpack --mode production",
  },

6. El siguiente código en el package.json indicará a la persona que instale el módulo que necesita esta versión de React para que le funcione. Es un código recomendable pero no obligatorio:

package.json

  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }

4. Instalamos babel

npm i --save-dev @babel/core @babel/preset-react babel-loader @babel/preset-env  

7. Creamos el fichero de configuración de babel.

./babelrc

{
    "presets": [
        "@babel/preset-env",
        [
            "@babel/preset-react",
            {
                "runtime": "automatic"
            }
        ]
    ]
}

8. Instalamos React:

npm i react
npm i react-dom

9. Añadimos el siguiente nodo al package.json para indicar el fichero que será importado cuando alguien utilice nuestra librería:

"main": "./build/main.js",

10. Nos loqueamos con nuestra cuenta de npm:

npm login

11.

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

12. Ya podemos instalar el módulo en otro proyecto. Para ello, utilizaremos el nombre del módulo tal como esta indicado en el nodo name del package.json:

npm i nombre-modulo --save

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