├── .babelrc
├── .gitignore
├── README.md
├── docs
├── assets
│ └── webpack-sprite.png
├── index.html
├── main.0d7cfbbe34c458d9ccea.js
└── main.c9be7f6706a28700d217.css
├── package-lock.json
├── package.json
├── src
├── assets
│ └── webpack-sprite.png
├── css
│ └── componentes.css
├── index.html
├── index.js
├── js
│ ├── await.js
│ ├── callbacks.js
│ ├── promesas.js
│ └── uso-call-prom.back.js
└── styles.css
├── webpack.config.js
└── webpack.prod.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-env","minify"]
3 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 |
2 |
3 | node_modules/
4 |
5 | dist/
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Webpack Starter
2 |
3 | Este es el proyecto inicial para crear aplicaciones utilizando webpack.
4 |
5 | ### Notas:
6 | Recuerden reconstruir los módulos de Node
7 | ```
8 | npm install
9 | ```
10 |
11 | Y para construir el build, recueren:
12 | ```
13 | npm run build
14 | ```
--------------------------------------------------------------------------------
/docs/assets/webpack-sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Klerith/async-await-javascript/8cb25270402b8d738852a980397464d7a07d2c95/docs/assets/webpack-sprite.png
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Webpack
8 |
9 |
10 |
11 | 
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/docs/main.0d7cfbbe34c458d9ccea.js:
--------------------------------------------------------------------------------
1 | (function(a){function b(d){if(c[d])return c[d].exports;var e=c[d]={i:d,l:!1,exports:{}};return a[d].call(e.exports,e,e.exports,b),e.l=!0,e.exports}var c={};return b.m=a,b.c=c,b.d=function(a,c,d){b.o(a,c)||Object.defineProperty(a,c,{enumerable:!0,get:d})},b.r=function(a){'undefined'!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(a,Symbol.toStringTag,{value:'Module'}),Object.defineProperty(a,'__esModule',{value:!0})},b.t=function(a,c){if(1&c&&(a=b(a)),8&c)return a;if(4&c&&'object'==typeof a&&a&&a.__esModule)return a;var d=Object.create(null);if(b.r(d),Object.defineProperty(d,'default',{enumerable:!0,value:a}),2&c&&'string'!=typeof a)for(var e in a)b.d(d,e,function(b){return a[b]}.bind(null,e));return d},b.n=function(a){var c=a&&a.__esModule?function(){return a['default']}:function(){return a};return b.d(c,'a',c),c},b.o=function(a,b){return Object.prototype.hasOwnProperty.call(a,b)},b.p='',b(b.s=5)})([function(a,b,c){var d=c(1),e=c(2);e=e.__esModule?e.default:e,'string'==typeof e&&(e=[[a.i,e,'']]);var f=d(a.i,e,{insert:'head',singleton:!1}),g=e.locals?e.locals:{};a.exports=g},function(a,b,c){'use strict';function d(a,b,c){for(var d,e=0;e
2 |
3 |
4 |
5 |
6 |
7 | Webpack
8 |
9 |
10 |
11 | 
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import { heroesCiclo, heroeIfAwait } from './js/await';
2 |
3 | heroesCiclo();
4 |
5 |
6 | heroeIfAwait('iron');
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/js/await.js:
--------------------------------------------------------------------------------
1 | import { buscarHeroeAsync, buscarHeroe } from './promesas';
2 |
3 |
4 | const heroesIds = ['capi','iron','spider'];
5 | const heroesPromesas = heroesIds.map( buscarHeroe );
6 | // const heroesPromesas = heroesIds.map( id => buscarHeroe(id) );
7 |
8 |
9 | export const obtenerHeroesArr = async() => {
10 | return await Promise.all( heroesIds.map( buscarHeroe ) );
11 | };
12 |
13 |
14 | export const obtenerHeroeAwait = async( id ) => {
15 |
16 | try {
17 |
18 | const heroe = await buscarHeroeAsync( id );
19 | return heroe;
20 |
21 | }catch( err ) {
22 | console.log( 'CATCH!!!' );
23 | return {
24 | nombre: 'Sin nombre',
25 | poder: 'Sin poder'
26 | };
27 |
28 | }
29 | }
30 |
31 |
32 | export const heroesCiclo = async () => {
33 |
34 | console.time('HeroesCiclo');
35 |
36 | // heroesPromesas.forEach( async(p) => console.log( await p ));
37 |
38 |
39 | for await( const heroe of heroesPromesas ) {
40 | console.log(heroe);
41 | }
42 |
43 |
44 |
45 | console.timeEnd('HeroesCiclo');
46 |
47 | // const heroes = await Promise.all( heroesPromesas );
48 | // heroes.forEach( heroe => console.log(heroe) );
49 | }
50 |
51 |
52 | export const heroeIfAwait = async(id) => {
53 |
54 | if ( (await buscarHeroeAsync(id)).nombre === 'Ironman' ) {
55 | console.log('Es el mejor de todos');
56 | } else {
57 | console.log('Naaaa');
58 | }
59 |
60 | }
61 |
62 |
63 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/src/js/callbacks.js:
--------------------------------------------------------------------------------
1 | const heroes = {
2 | capi: {
3 | nombre: 'Capitán América',
4 | poder: 'Aguantar inyecciones sin morir'
5 | },
6 | iron: {
7 | nombre: 'Ironman',
8 | poder: 'Absurda cantidad de dinero'
9 | },
10 | spider: {
11 | nombre: 'Spiderman',
12 | poder: 'La mejor reacciona alergica a las picaduras de arañas'
13 | },
14 | }
15 |
16 | // callback retorna...
17 | export const buscarHeroe = ( id, callback ) => {
18 |
19 | const heroe = heroes[id];
20 |
21 | if ( heroe ) {
22 | callback( null, heroe );
23 | } else {
24 | // Un error
25 | callback(`No existe un héroe con el id ${ id }`);
26 | }
27 |
28 | // callback( heroe );
29 |
30 |
31 | }
32 |
33 |
--------------------------------------------------------------------------------
/src/js/promesas.js:
--------------------------------------------------------------------------------
1 | const heroes = {
2 | capi: {
3 | nombre: 'Capitán América',
4 | poder: 'Aguantar inyecciones sin morir'
5 | },
6 | iron: {
7 | nombre: 'Ironman',
8 | poder: 'Absurda cantidad de dinero'
9 | },
10 | spider: {
11 | nombre: 'Spiderman',
12 | poder: 'La mejor reacciona alergica a las picaduras de arañas'
13 | },
14 | }
15 |
16 |
17 | export const buscarHeroe = ( id ) => {
18 |
19 | const heroe = heroes[id];
20 |
21 | return new Promise( ( resolve, reject ) => {
22 | if( heroe ) {
23 |
24 | setTimeout(() => resolve( heroe ), 1000);
25 |
26 | } else {
27 | reject(`No existe un héroe con el id ${ id }`);
28 | }
29 | });
30 | }
31 |
32 | export const buscarHeroeAsync = async( id ) => {
33 |
34 | const heroe = heroes[id];
35 |
36 | if( heroe ) {
37 | return heroe;
38 | } else {
39 | throw `No existe un héroe con el id ${ id }`;
40 | }
41 | }
42 |
43 |
44 | const promesaLenta = new Promise( ( resolve, reject ) => {
45 | setTimeout(() => resolve('Promesa Lenta') , 2000);
46 | });
47 |
48 | const promesaMedia = new Promise( ( resolve, reject ) => {
49 | setTimeout(() => resolve('Promesa Media') , 1500);
50 | });
51 |
52 | const promesaRapida = new Promise( ( resolve, reject ) => {
53 | setTimeout(() => resolve('Promesa Rápida') , 1000);
54 | });
55 |
56 |
57 | export {
58 | promesaLenta,
59 | promesaMedia,
60 | promesaRapida
61 | }
62 |
--------------------------------------------------------------------------------
/src/js/uso-call-prom.back.js:
--------------------------------------------------------------------------------
1 | import { buscarHeroe as buscarHeroeCallback } from './js/callbacks';
2 | import { buscarHeroe } from './js/promesas';
3 |
4 | import './styles.css';
5 |
6 | const heroeId1 = 'capi';
7 | const heroeId2 = 'spider';
8 |
9 |
10 | // buscarHeroe( heroeId1, ( err, heroe1 ) => {
11 |
12 | // if ( err ) { return console.error( err ); }
13 |
14 |
15 | // buscarHeroe( heroeId2, ( err, heroe2 ) => {
16 |
17 | // if ( err ) { return console.error( err ); }
18 |
19 | // console.log(`Enviando a ${ heroe1.nombre } y ${ heroe2.nombre } a la misión `);
20 |
21 | // });
22 |
23 | // });
24 |
25 |
26 | // buscarHeroe( heroeId1 ).then( heroe1 => {
27 | // // console.log(`Enviando a ${ heroe.nombre } a la misión`);
28 | // buscarHeroe( heroeId2 ).then( heroe2 => {
29 | // console.log(`Enviando a ${ heroe1.nombre } y ${ heroe2.nombre } a la misión`);
30 | // });
31 | // });
32 |
33 | Promise.all([ buscarHeroe(heroeId1), buscarHeroe(heroeId2) ])
34 | .then( ([heroe1, heroe2]) => {
35 |
36 | console.log(`Enviando a ${ heroe1.nombre } y ${ heroe2.nombre } a la misión`);
37 | }).catch( err => {
38 | alert(err)
39 | }).finally( () => {
40 | console.log('Se termino el promise.all');
41 | })
42 |
43 |
44 |
45 | console.log('Fin de programa');
46 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* Este es el estilo del main */
2 | html, body {
3 | background-color: gray;
4 | }
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebPackPlugin = require('html-webpack-plugin');
2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
4 |
5 | module.exports = {
6 | mode: 'development',
7 | optimization: {
8 | minimizer: [ new OptimizeCssAssetsPlugin() ]
9 | },
10 | module: {
11 | rules: [
12 | {
13 | test: /\.css$/,
14 | exclude: /styles\.css$/,
15 | use: [
16 | 'style-loader',
17 | 'css-loader'
18 | ]
19 | },
20 | {
21 | test: /styles\.css$/,
22 | use: [
23 | MiniCssExtractPlugin.loader,
24 | 'css-loader'
25 | ]
26 | },
27 | {
28 | test: /\.html$/,
29 | use: [
30 | {
31 | loader: 'html-loader',
32 | options: { minimize: false }
33 | }
34 | ]
35 | },
36 | {
37 | test: /\.(png|svg|jpg|gif)$/,
38 | use: [
39 | {
40 | loader: 'file-loader',
41 | options: {
42 | esModule: false,
43 | name: 'assets/[name].[ext]'
44 | }
45 | }
46 | ]
47 | }
48 | ]
49 | },
50 | plugins: [
51 | new HtmlWebPackPlugin({
52 | template: './src/index.html',
53 | filename: './index.html'
54 | }),
55 | new MiniCssExtractPlugin({
56 | filename: '[name].css',
57 | ignoreOrder: false
58 | })
59 | ]
60 |
61 | }
62 |
63 |
--------------------------------------------------------------------------------
/webpack.prod.js:
--------------------------------------------------------------------------------
1 | const HtmlWebPackPlugin = require('html-webpack-plugin');
2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
4 | const MinifyPlugin = require('babel-minify-webpack-plugin');
5 | const { CleanWebpackPlugin } = require('clean-webpack-plugin');
6 |
7 | module.exports = {
8 | mode: 'production',
9 | optimization: {
10 | minimizer: [ new OptimizeCssAssetsPlugin() ]
11 | },
12 | output: {
13 | filename: 'main.[contentHash].js'
14 | },
15 | module: {
16 | rules: [
17 | {
18 | test: /\.js$/,
19 | exclude: /node_modules/,
20 | use: [
21 | 'babel-loader'
22 | ]
23 | },
24 | {
25 | test: /\.css$/,
26 | exclude: /styles\.css$/,
27 | use: [
28 | 'style-loader',
29 | 'css-loader'
30 | ]
31 | },
32 | {
33 | test: /styles\.css$/,
34 | use: [
35 | MiniCssExtractPlugin.loader,
36 | 'css-loader'
37 | ]
38 | },
39 | {
40 | test: /\.html$/,
41 | use: [
42 | {
43 | loader: 'html-loader',
44 | options: { minimize: false }
45 | }
46 | ]
47 | },
48 | {
49 | test: /\.(png|svg|jpg|gif)$/,
50 | use: [
51 | {
52 | loader: 'file-loader',
53 | options: {
54 | esModule: false,
55 | name: 'assets/[name].[ext]'
56 | }
57 | }
58 | ]
59 | }
60 | ]
61 | },
62 | plugins: [
63 | new HtmlWebPackPlugin({
64 | template: './src/index.html',
65 | filename: './index.html'
66 | }),
67 | new MiniCssExtractPlugin({
68 | filename: '[name].[contentHash].css',
69 | ignoreOrder: false
70 | }),
71 | new MinifyPlugin(),
72 | new CleanWebpackPlugin(),
73 | ]
74 |
75 | }
76 |
77 |
--------------------------------------------------------------------------------