16 Cursos de TypeScript – módulos instalando webpack

Tutorial número 16 del curso de typescript en este tutorial veremos los módulos.

Podemos decir en general, que un módulo sirve para encapsular nuestro código, es decir, para controlar qué se expone públicamente y qué se mantiene oculto. Al igual que las piezas de un automóvil solo se relacionan unas con otras en determinados puntos y por lo demás son independientes, los módulos actúan como cajas negras permitiendo distribuir la lógica de una aplicación en partes pequeñas, reutilizables y articulables.

Vamos a utilizar el paquete de desarrollo webpack que además incluye un servidor para lo cual antes tenemos que tener instalado node en nuestro equipo.

Tenemos la siguiente configuración para el archivo tsconfig.json:

{
  "compilerOptions": {
  "target": "es2017",                      
  "module": "amd",                    
  "strict": true,                          
  "noImplicitAny": true,                
  "strictNullChecks": true,              
  "moduleResolution": "node",              
  "esModuleInterop": true                   
  }
}

Para instalar webpack ejecutamos el comando:

npm install webpack webpack-cli webpack-dev-server

Luego instalamos el cargador de typescript que nos permite cargar nuestras clases, ejecutamos el comando:

npm install typescript ts-loader --save-dev

Creamos un proyecto de node, ejecutamos el comando:

npm init -y

Agregamos en el package.json en scripts el siguiente código:

"start": "webpack serve --mode development --open --port=8081"

Finalmente creamos el archivo webpack.config.js y ponemos el siguiente código:

const path = require('path');

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

Iniciamos el servidor con el comando:

 npm start

Ingresamos a: localhost:8081