nienv

Un plugin minimalista de Babel para cargar variables de entorno en proyectos JavaScript y React Native, inspirado en react-native-dotenv pero con un enfoque en la simplicidad y el rendimiento.

Características

• ✅ Carga variables desde archivos .env
• ✅ Compatible con React Native
• ✅ Soporte para TypeScript con tipos dinámicos
• ✅ Mínimas dependencias
• ✅ Transformación a nivel de compilación para máximo rendimiento

Instalación

npm install --save-dev nienv
# o
yarn add --dev nienv

Configuración

1. Añade el plugin a tu configuración de Babel

En tu archivo babel.config.js:

module.exports = {
  plugins: [
    ["nienv", { 
      path: ".env", 
      safe: true, 
      allowUndefined: false,
      typeDefinitionPath: "./types/env.d.ts" // Opcional: genera automáticamente el archivo de tipos
    }]
  ]
};

2. Crea tu archivo .env

API_URL=https://api.example.com
AIRVANA_APP_API=https://airvana-app.example.com
DEBUG=false

3. Importa y usa tus variables de entorno

import { API_URL, AIRVANA_APP_API } from "nienv";

console.log(API_URL);
console.log(AIRVANA_APP_API);

Opciones de configuración

| Opción | Tipo | Por defecto | Descripción | |--------|------|-------------|-------------| | path | string | .env | Ruta al archivo de variables de entorno | | safe | boolean | false | Si es true, el plugin fallará si el archivo no existe | | allowUndefined | boolean | false | Si es true, permite importar variables no definidas (con valor vacío) | | typeDefinitionPath | string | undefined | Si se especifica, genera automáticamente el archivo de definición de tipos en esta ruta |

Soporte para TypeScript

nienv incluye soporte para TypeScript mediante un sistema de tipos dinámico. Puedes configurarlo de dos formas:

1. Generación automática (recomendado)

Simplemente especifica la opción typeDefinitionPath en tu configuración de Babel para que el plugin genere automáticamente el archivo de tipos:

// babel.config.js
module.exports = {
  plugins: [
    ["nienv", { 
      path: ".env", 
      typeDefinitionPath: "./types/env.d.ts" // Genera automáticamente el archivo de tipos
    }]
  ]
};

2. Configuración manual

Alternativamente, puedes crear manualmente un archivo env.d.ts en tu proyecto con el siguiente contenido:

declare module 'nienv' {
  const env: {
    [key: string]: string;
  }
  
  export default env;
  
  // Esto permite importaciones de desestructuración
  export type EnvKey = string;
  export const [key: string]: string;
}

Uso con TypeScript

// Importación con desestructuración
import { API_URL, DEBUG } from 'nienv';

// También puedes importar todas las variables como un objeto
import env from 'nienv';
console.log(env.API_URL);
console.log(env.NEW_VARIABLE); // No necesitas actualizar los tipos

// Con verificación de tipos
function processApiUrl(url: string) {
  // API_URL es reconocido como string
  return processApiUrl(API_URL);
}

Cómo funciona

nienv es un plugin de Babel que:

1. Intercepta las importaciones desde "nienv"
2. Lee y parsea el archivo .env
3. Reemplaza las importaciones con declaraciones de constantes con los valores correspondientes
4. Opcionalmente, genera un archivo de definición de tipos TypeScript dinámico

Este enfoque garantiza que no hay sobrecarga en tiempo de ejecución y que tus variables de entorno están disponibles en el bundle final.

Ejemplos de uso

Ejemplo con React Native

import { API_URL } from 'nienv';
import React from 'react';
import { Text, View } from 'react-native';

export function ApiInfo() {
  return (
    <View>
      <Text>API URL: {API_URL}</Text>
    </View>
  );
}

Renombrar variables al importar

También puedes renombrar las variables durante la importación:

import { API_URL as URL, DEBUG as IS_DEBUG } from 'nienv';

console.log(URL);      // https://api.example.com
console.log(IS_DEBUG); // false

Licencia

MIT