• Ir al contenido principal
  • Skip to secondary menu
  • Ir a la barra lateral primaria
  • Ir al pie de página
  • Inicio
  • Secciones
    • Ciencia de datos
    • Criptografía
    • Herramientas
    • Noticias
    • Opinión
  • Programación
    • JavaScript
    • Julia
    • Matlab
    • Python
    • R
  • Boletín
  • Contacto
  • Acerca de Analytics Lane
  • Tienda
    • Libros
    • Equipamiento de oficina
    • Equipamiento en movilidad
    • Tiendas afiliadas
      • AliExpress
      • Amazon
      • GearBest
      • GeekBuying
      • JoyBuy

Analytics Lane

Ciencia e ingeniería de datos aplicada

  • Ciencia de datos
  • Criptografía
  • Python
  • Matlab
  • R
  • Julia
  • JavaScript
  • Herramientas
  • Opinión
  • Noticias

Compilar con Webpack (4º parte – Creación de una librería TypeScript)

diciembre 9, 2020 Por Daniel Rodríguez Dejar un comentario

En entradas anteriores se ha visto cómo crear y estructurar un proyecto Node para crear una librería TypeScript. Ahora vamos a ver cómo compilar con Webpack nuestra librería en un único archivo para así pueda usarse en un navegador.

Instalación de webpack

En primer lugar, es necesario que instalemos en nuestro proyecto las librerías webpack, webpack-cli y ts-loader. Siendo el último un loader de Webpack que necesitamos ya que estamos trabajando con TypeScript. Así debemos escribir en la terminal el comando

npm install webpack webpack-cli ts-loader --save-dev

Configurando Webpack

Una vez instalado Webpack y las dependencias necesarias es necesario crear un archivo webpack.config.js en el que se le indicará cómo realizar el proceso de compilación. Por ejemplo, se puede usar el siguiente código

const path = require('path');

const package = require('./package.json');
const library = package.name;
const filename = `${package.name}_${package.version}.js`;

module.exports = {
    entry: './src/index.ts',
    devtool: 'inline-source-map',
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: filename,
        library: library,
        path: path.resolve(__dirname, 'bundles'),
    }
};

Un archivo en el que se lee el nombre del paquete y la versión del archivo package.json del proyecto. Así, a la hora de compilar la librería se generará automáticamente el nombre del archivo con la versión.

Posteriormente se exporta la configuración. En primer lugar indicamos el punto de inicio del proyecto, en este caso será archivo ./src/index.ts que crearemos a continuación. Una opción interesante es incluir los archivos .map, lo que se puede indicar con la siguiente opción. Además indicamos que vamos a trabajar en modo producción.

Al usar TypeScript es necesario importar el módulo ts-loader instalado previamente, el cual se encuentra en la carpeta node_module. Agregando las extensiones de archivos que ha de resolver, en este caso los TypeScript y JavaScript: .tsx, .ts, .js.

Finalmente se configura el archivo de salida. En nuestro caso el nombre será el nombre del proyecto seguido de la versión. Los cuales se obtienen de package.json. La librería es el nombre con el que se puede acceder desde el navegador y será igual al nombre del proyecto. En último lugar se indica que el archivo final se guarde en la carpeta bundles.

Exporta las componentes con index.ts

Ahora es necesario crear el archivo que es el punto de inicio de proyecto index.ts. En el que únicamente se exportará los diferentes módulos del proyecto. Dato que solo tenemos un módulo el archivo es relativamente sencillo.

export * as array from './array'

En el que se indica que exporte todo el contenido de array.ts con el nombre array. En el caso de que solo queramos exportar parte del módulo solamente tenemos que indicar los modelos deseados. Por ejemplo, para exportar solamente la función sum() se puede escribir

export { sum } from './array'

Lo que permite mantener privada una parte del código.

Compilar con Webpack el proyecto

Una vez llegado a este punto se puede compilar la librería. Solamente hay que escribir en la línea de comandos la instrucción npx webpack. En caso de que todo haya ido bien aparecerá una nueva carpeta bundles en la que tendremos el archivo tslane_1.0.0.js.

Al igual que hicimos en la entrada anterior, es aconsejable guardar este comando entre los scripts del módulo. Script que en nuestro caso llamaremos bundles.

Uso en el navegador de la librería

Ahora solamente hay que importar el archivo JavaScript generado por Webpack en una página web y usar sus métodos. Por ejemplo, se puede usar la siguiente página de ejemplo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="./bundles/tslane_1.0.0.js"></script>
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        console.log(tslane.array.sum([1,3]));
    </script>
</body>
</html>

Página en la que se importa el archivo y posteriormente se usa la función array(). Es importante notar que todo el contenido de la librería se encontrara en tslane ya que este es el nombre que indicamos en el archivo de configuración de Webpack. Por eso para llamar a array() se ha usado tslane.array().

Ahora, si cargamos esta página y se puede ver en la consola que se imprime por pantalla el número 4.

La librería tslane compilada con Webpack ejecutándose en un navegador
La librería tslane compilada con Webpack ejecutándose en un navegador

Múltiples configuraciones en Webpack

Una cosa interesante es que Webpack permite crear múltiples configuraciones en el archivo webpack.config.js. De modo que es posible compilar a la vez con diferentes opciones. Por ejemplo, si se desea omitir el archivo map en el paquete. Aunque es una información útil para depuración, aumenta considerablemente el tamaño final del archivo. Por lo que en producción puede no ser interesante incluirlo. Otra opción podría ser cambiar la librería por CommonJS por amd.

Para incluir más de una configuración solamente se tiene que exportar un vector con estas. Siendo aconsejable incluir un nombre diferente para cada una. Como se muestra en el siguiente ejemplo.

const path = require('path');

const package = require('./package.json');
const library = package.name;
const filename = `${package.name}_${package.version}.js`;
const mapname = `${package.name}_map_${package.version}.js`;

module.exports = [{
    name: 'map',
    entry: './src/index.ts',
    devtool: 'inline-source-map',
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: mapname,
        library: library,
        path: path.resolve(__dirname, 'bundles'),
    }
}, {
    name: 'production',
    entry: './src/index.ts',
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: filename,
        library: library,
        path: path.resolve(__dirname, 'bundles'),
    }
}];

Así, si ejecutamos npx webpack se compilarán las dos configuraciones. Mientras que si solamente queremos una versión se debe incluir el nombre de esta en la opción --config-name. Así para compilar solamente la que incluye los mapas se debería escribir npx webpack --config-name=map.

Conclusiones

Hemos visto que el proceso de compilar con Webpack una librería TypeScript es relativamente sencillo. Solamente es necesario crear un archivo webpack.config.js como el de la entrada. Pudiéndose usar este como plantilla para cualquier proyecto.

Imagen de M W en Pixabay

¿Te ha parecido de utilidad el contenido?

¡Puntúalo entre una y cinco estrellas!

Puntuación promedio 0 / 5. Votos emitidos: 0

Ya que has encontrado útil este contenido...

¡Síguenos en redes sociales!

¡Siento que este contenido no te haya sido útil!

¡Déjame mejorar este contenido!

Dime, ¿cómo puedo mejorar este contenido?

Contenido relacionado

Archivado en:JavaScript Etiquetado con:TypeScript

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

I accept the Terms and Conditions and the Privacy Policy

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Publicidad


Barra lateral primaria

Suscríbete a nuestro boletín

Suscríbete al boletín semanal para estar al día de todas las publicaciones.

Política de Privacidad

¡Síguenos en redes sociales!

  • facebook
  • github
  • telegram
  • pinterest
  • rss
  • tumblr
  • twitter
  • youtube

Publicidad

Tiendas afiliadas

Ayúdanos realizando tus compras sin coste adicional con los enlaces de la tienda. ¡Gracias!

Entradas recientes

Usar dispositivos USB en VirtualBox

enero 15, 2021 Por Daniel Rodríguez Dejar un comentario

Eliminar elementos en matrices de Matlab

enero 13, 2021 Por Daniel Rodríguez Dejar un comentario

NumPy

NumPy: Crear matrices vacías en NumPy y adjuntar filas o columnas

enero 11, 2021 Por Daniel Rodríguez Dejar un comentario

Publicidad

Es tendencia

  • Seleccionar filas y columnas en Pandas con iloc y loc bajo Python
  • ¿Cómo eliminar columnas y filas en un dataframe pandas? bajo Python
  • Excel en Python Guardar y leer archivos Excel en Python bajo Python
  • Operaciones de filtrado de DataFrame con Pandas en base a los valores de las columnas bajo Python
  • Unir y combinar dataframes con pandas en Python bajo Python

Publicidad

Lo mejor valorado

5 (3)

Ordenar una matriz en Matlab en base a una fila o columna

5 (3)

Automatizar el análisis de datos con Pandas-Profiling

5 (5)

Diferencias entre var y let en JavaScript

5 (6)

Operaciones de filtrado de DataFrame con Pandas en base a los valores de las columnas

5 (3)

Unir y combinar dataframes con pandas en Python

Publicidad

Comentarios recientes

  • Daniel Rodríguez en Calculadora de probabilidades de ganar a la lotería
  • abel en Calculadora de probabilidades de ganar a la lotería
  • David Arias en Diferencias entre regresión y clasificación en aprendizaje automático
  • Juan Aguilar en Archivos JSON con Python: lectura y escritura
  • Camilo en Contar palabras en una celda Excel

Publicidad

Footer

Secciones

  • Ciencia de datos
  • Criptografía
  • Herramientas
  • Noticias
  • Opinión

Programación

  • JavaScript
  • Julia
  • Matlab
  • Python
  • R

Analytics Lane

  • Acerca de Analytics Lane
  • Boletín de noticias
  • Contacto
  • Lo más popular
  • Tienda

Tiendas Afiliadas

  • AliExpress
  • Amazon
  • BangGood
  • GearBest
  • Geekbuying
  • JoyBuy

Sobre de Analytics Lane

En Analytics Lane tratamos de explicar los principales conceptos de la ciencia e ingeniería de datos con un enfoque práctico. Los principales temas tratados son ciencia de datos, ingeniería de datos, inteligencia artificial, machine learning, deep learning y criptografía. Además, también se habla de los principales lenguajes de programación y herramientas utilizadas por los científicos e ingenieros de datos.

Tiendas afiliadas

Ayúdanos realizando tus compras sin coste adicional con los enlaces de la tienda. ¡Gracias!

Amazon

2018-2020 Analytics Lane · Términos y condiciones · Política de Cookies · Política de Privacidad · Herramientas de privacidad · Contacto