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.
Esta publicación forma parte de la serie “Creación de una librería TypeScript” de la cual forman los siguientes títulos:
- Creación de una librería TypeScript
- Creación de un proyecto TypeScript en Node
- Estructurar el proyecto TypeScript y pruebas unitarias
- Compilar con Webpack
- Validar y documentar el código TypeScript
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.
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. La semana que viene finalizaremos la serie viendo el uso de ESLint para identificar y corregir aquel código que puede generar problemas y corregirlo.
Deja una respuesta