Crear una librería para React partiendo desde un proyecto y con MicroBundle

Tiempo de lectura: 2 minutos

Hoy vamos a crear una librería de React de una forma más sencilla y sin utilizar otras librerías. Solo usaremos el compilador MicroBundle.

Lo primero que tenemos que hacer es crear un proyecto nuevo React, usaremos TypeScript:

npx create-react-app my-react-library --template typescript

Ahora crearemos una nueva carpeta dentro de src llamada components y crearemos un componente de ejemplo llamado Button.tsx

import React from 'react';

interface BotonProps {
  texto: string;
}

const Boton: React.FC<BotonProps> = ({ texto }) => {
  return <button>{texto}</button>;
};

export default Boton;

Ahora vamos a index.tsx y sustituimos todo por:

export { default as Button } from './components/Button';

*Es importante usar la ruta de ./ y no utilizar la ruta @/ para evitar errores al importar la librería.

Ahora configuramos package.json, añadimos lo siguiente a lo que ya tenemos:

{
  "name": "my-react-library",
  "version": "1.0.0",
  "description": "Descripcion libreria",
  "author": "Tu Nombre",
  "license": "MIT",
  "repository": "Repositorio",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "source": "src/index.tsx",
  "scripts": {
    "build": "microbundle-crl --no-sourcemap"
  },
  "peerDependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

Instalar microbundle:

npm install --save-dev microbundle-crl

Y ahora nuestro tsconfig.json debería ser:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "declaration": true,
    "jsx": "preserve",
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": ["src/**/*"]
}

Ahora ya podemos ejecutar:

npm run build

Y nos creará la libería.

Si añadimos una libería externa debemos declararla dentro de package.json:

"external": [
    "@mui/material"
  ],
 "peerDependencies": {
    "@mui/material": "^5.0.0"
  },

Si queremos crear un enlace para importarla de forma local en otro proyecto haremos lo siguiente:

• Vamos a la carpeta raíz de la librería creada y en el mismo directorío dónde está package.json ejecutamos:

npm link

Y ahora para usarlo en nuestro proyecto local, pondremos:

npm link my-react-library

Y podremos utilizarla de la siguiente forma:

import { Button } from 'my-react-library';

const App = () => {
  return (
    <div>
      <Button texto="Click Me" />
    </div>
  );
};

export default App;

Para subir una versión al packete:

npm version patch