Please enable JavaScript.

Coggle requires JavaScript to display documents.

modern Javascript ecosystem - Coggle Diagram

- - - - discrete chunk of functionality
      - abstraction
      - encapsulation
      - usually a single task or responsibility
      - reusable
    - - Code splitting → breakup our code base into chunks, loaded on demand
      - Loaders (CSS, SASS, JSX, etc.)
      - Clever Parsing
      - Plugins
      - example loaders
        
        CSS & Style
        
        Sass & Less (CSS precompilers)
        
        Babel
        
        json
        
        TypeScript
        
        Coffee
    - - npm install -g webpack
      - dev server → npm install Webpack-dev-server
      - example → webpack_app (2017)
        
        why run through webpack
        
        to import a file into your app.js as a module
        
        add css through js
        
        use babel : ES6 → ES5
        
        module.exports → makes available to the outside
        
        e.g.
        
        people.js → module.exports = 'hello world";
        
        app.js → require('./people.js');
        
        can be anything → e.g. return of a function, array of objects
        
        can require / import from external library (jquery)
        
        have to run through webpack on every change
        
        can use watch command : webpack app.js bundle.js --watch → run in the background
        
        installation
        
        create a package.json file → part of node.js its a manifest file, holds all the information for the app (dependencies)
        
        → webpack app.js bundle.js
        
        create app.js, index.html → bundle.js
        
        npm init
        
        npm install webpack -g
        
        to include css in our javascript : loader → css and styles
        
        require ('!style-loader!css-loader!./style.css)`
        
        install css loader → npm install css-loader style-loader --save-dev (save to dev dependencies)
        
        style.css → body { background : red; }
        
        webpack.config.js
        
        module.exports = { ... }
        
        →entry: '/app.js',
        
        →output: {path : _dirname, filename: 'bundle.js' },
        
        module : { loaders : [ ... ] }
    - - webpack reads the entry point and analyzes its dependencies, its dependencies' dependencies ...
        
        cats.js
        
        var cats = ['dave, 'mark', luke];
        module.exports = cats;
        
        app.js
        
        var cats = require('./cats.js')
        console.log(cats)
      - webpack bundles the entry point and all its dependencies into a single file
        
        app.bundle.js
        
        included in html file
  - - - e.g. the AJAX library → first need you to call the ajax, then you include the script where you have your custom code
      - there are always dependencies
        
        multiple libraries
        
        custom css
        
        svg files
      - webpack allows you to modularize your code as much as you want → webpack will push all the code in one single file
      - webpack allows you to write your code the way you want (modern javascript etc.)
    - - Loaders are the node-based utilities built for webpack to help webpack to compile and/or transform a given type of resource that can be bundled as a javascript module
        
        utilized before the final compilation of our bundled file
      - A webpack plugin is a JavaScript object that has an apply method. This apply method is called by the webpack compiler, giving access to the entire compilation lifecycle.
        
        are utilized after compilation (e.g. inject code into html)
    - - setup
        
        create folder → initialize project: npm init
        
        npm init -y
        
        install webpack & webpack cli
        
        `npm i webpack webpack-cli --save-dev
        
        add config file
        
        name: webpack.config.js
        
        module.exports = { ... };
        
        add entry point (main file) → entry: "./app/index.js"
      - what do you need for your project?
        
        svg, css, etc.
        
        svg → svg-inline-loader
        
        npm install svg-inline-loader --save-dev
        
        +config
        
        cleans up and inlines your svg files
        
        css → css-loader
        
        npm install --save-dev css-loader
        
        also need style-loader
        
        The css-loader interprets import and url() like import/require() and will resolve them.
        
        confg file → loader, or use : recommend → use (can load single, or multiple libraries)
        
        babel → babel loader
        
        we want to use modern javascript
        
        configuration → just load what you need ;-)
        
        npm install --save-dev babel-loader
        
        This package allows transpiling JavaScript files using Babel and webpack.
      - output file
        
        output : { ... }
        
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
        
        const path = require("path")
      - plugins → used after files are compiled
        
        inject html → html-webpack-plugin
        
        npm i --save-dev html-webpack-plugin
        
        add require : const HtmlWebpackPlugin = require('html-webpack-plugin')
        
        add config
        
        simplifies creation of html files to serve your webpack bundles
      - dev server
        
        Use webpack with a development server that provides live reloading → recompiles on save
        
        configuration are done in package.json file
      - mode
        
        "development" → more forgiving
        
        "production" → more strict, all files are compressed, all spacing is being removed (minifies things
        
        defined as a variable
        
        mode:process.env.NODE_ENV === "production" ? "production" : "development"
  - - - uses presets that can add extra functionality → e.g. babel
      - wepack → used to take modules with dependencies and create static assets from them
    - - a compiler that will take features from the latest version of js and bring them down to es5
      - will need to use a webpack plugin
    - - npm init
      - install dependencies
      - create webpack config file
      - create folders and files
      - build
      - webpack dev server
  - - - allows you to create a powerful web app environment
      - use JS modules, transpile your code, create source maps, typescript
      - most of the time, you only have to do this once → can be used for multiple projects
    - - setup
        
        create generateJoke.js → export default generateJoke -- will receive error
        
        run npm init
        
        install dependencies →npm install -D webpack webpack-cli
        
        create folders and files: /src → index.js, /dist → index,html
      - to run webpack → you need to create a script in our package.json file
        
        "build": "webpack --mode production"
        
        we need to set the mode, we don't have a webpack config file
        
        npm run build
        
        we can now import and export modules, as well as npm modules (uuid)
      - configure webpack.config.js
        
        module.exports = { ... }
        
        mode : "development"
        
        entry: path.resolve(__dirname, "src/index.js" )
        
        output: { ... }
        
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        
        set mode, entry and output → by default it is looking at entrty: index.js and output : /dist, main.js
        
        can set multiple entry points entry : { ... }
        
        __dirname → current directory
      - loaders
        
        can load images, svg, css right into your javascript
        
        e.g. npm install -D sass
        
        install loaders → style-loader css-loader sass-loader
        
        create a sass file → import to index.js
        
        will get error -- without setting up installed loaders in config file
        
        config
        
        module: { rules [ { ... } ] }
        
        rules: [ { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] }],
      - plugins
        
        a little more powerful than loaders
        
        e.g. have the dist folder rebuild on npm run build
        
        use a template to persist your index.html file ;-)
        
        use [contenthash] to generate unique js file name
        
        npm install -D webpack-html-plugin
        
        config
        
        const HtmlWebpackPlugin = require("html-webpack-plugin");
        
        plugins: [ ... ]
        
        new HtmlWebpackPlugin({...})
        
        title: "Webpack Shatter", filename: "index.html",
        
        template: "src/template.html",
      - dev server
        
        add script to package.json
        
        "dev": "webpack serve"
        
        npm run dev → will ask to install dev server, start on port 8080
        
        config options for dev server
        
        devServer :{ ... }
        
        static : { directory: path.resolve(__dirname, "dist"), }
        
        port: 3000, open: true, hot: true, compress, true, historyApiFallback: true,
      - other webpack config notes
        
        output → clean: true, creates a single output bundle.js file
        
        add source maps → good for debugging (a map from your dist to your source code
        
        devtool: "source-map",
        
        bundle analyzer
        
        $ npm install -D webpack-bundle-analyzer
      - babel
        
        npm install -D babel-loader @babel/core @babel/preset-env
        
        config
        
        add rule
        
        test: /\.js$/,
        
        exclude: /node_modules/,
        
        use : { ... }
        
        loader: "babel-loader",
        
        options : { presets: ["@babel/preset-env"], }
      - images
        
        add rule { ... }
        
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        
        type: "asset/resource",
        
        output
        
        assetModuleFilename: "[name][ext]",
- - - - utils.js → export funciton double(n) { return n * 2 };
      - main.js → import { double } from './utils.js;
    - - export const name = 'Don';
      - import { double, name } from './utils.js;
    - - export { name, double };
      - import { double as utlisDouble, name } from './utils.js;
      - import * as Utils from './utils.js;
    - - export default function sayName() { ... };
      - export default means that this export (function, class), is the default export for this module
        
        can only have a single export default in a single module
      - import { default as sayName} from './utils.js;
      - import sayName from './utils.js;
  - - - mymodule1.js
        
        module.exports = { name: "brad" }
      - app.js
        
        const person = require('./mymodule1');
        
        same syntax for npm modules → node_modules folder
        
        const person = require('express');
        
        console.log(person.name);
  - - - export function sayHell() { ... };
      - import { person, sayHello } from "./mymodule2";
      - import * as mod from "./mymodule2";
      - default → don't have to use braces on import (default setting)
        
        const greeting = 'hello shatter';
        export default greeting
        
        import greeting from "./mymodule2";