Transpilers

Typescript

                    
                        class Car {
                            ps: number;
                             
                            constructor(ps: number) { 
                                this.ps = ps;
                            }
                        
                            drive() { 
                                console.log(`Car with ${this.ps} is driving.`);
                            }
                        }
                    
                

Transpilers

to JavaScript (ES5)

                    
                        var Car = (function () {
                            function Car(ps) {
                                this.ps = ps;
                            }
                            Car.prototype.drive = function () {
                                console.log("Car with " + this.ps + " is driving.");
                            };
                            return Car;
                        }());
                    
                

Babel

The most commonly used transpiler by far is Babel 👉🏼

Webpack Loaders

What is a loader?

A loader in Webpack can preprocess files. This allows you to bundle any static resource even beyond JavaScript.

Example Loader Configuration

                    
                        module.exports = {
                            module: {
                                rules: [
                                    {
                                        test: /\.md$/,
                                        use: [
                                            loader: "markdown-loader",
                                            options: {}
                                        ]
                                    }
                                ]
                            }
                        }
                    
                

Available Loaders

The webpack documentation has a good chapter to see different loaders in action: Loaders.

Exercise Time 🧠

• Use the babel webpack loader to transpile the code
• Use the style / css loaders to import your styles & fonts in your app.js
• Use the webpack HTML plugin to auto-generate your index.html

See the README.md for more information

Don't do it yourself

Popular framework CLIs do all the initial setup for you.

Don't do it yourself

Popular framework CLIs do all the initial setup for you.