ECMA Script 6 Simple Course, Babel, Webpack, Modules Part 4

 

Create directory and file modules/alertMessage.js

export const doAlertMessage = (message) => { 

    alert( message);

}

In App.js import and call the exported function from module

import {doAlertMessage} from "./modules/alertMessage";

doAlertMessage("calling a imported function");

execute the webpack script previously configured

$ npm run build

> @ build D:\Descargas\Tutorial2021\ReactCrashCourse2021\ES6
> webpack

asset bundle.js 4.27 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 186 bytes
  ./src/app.js 103 bytes [built] [code generated]
  ./src/modules/alertMessage.js 83 bytes [built] [code generated]
webpack 5.51.1 compiled successfully in 646 ms

In order to automatically transpile the code after each modification, add --watch to the script in package.json

{

  "devDependencies": {

    "@babel/cli": "^7.14.8",

    "@babel/core": "^7.15.0",

    "@babel/preset-env": "^7.15.0",

    "@babel/preset-react": "^7.14.5",

    "babel-loader": "^8.2.2",

    "webpack": "^5.51.1",

    "webpack-cli": "^4.8.0"

  },

  "scripts": {

    "build": "webpack --watch",

    "build-babel": "babel src -d output --watch"

  }

}

We can create another function in module and import it.

modules/alertMessage.js

export const doAlertMessage = (message) => { 

    alert( message);

}

export const doConsoleMessage = () => {

  console.log("doing console message.");

};

 app.js

import {doAlertMessage} from "./modules/alertMessage";

import {doConsoleMessage} from "./modules/alertMessage";

doAlertMessage("calling a imported function");

doConsoleMessage();

A variation of export is at the end of file

const doAlertMessage = (message) => { 

    alert( message);

}

const doConsoleMessage = () => {

  console.log("doing console message. export at end");

};

export {doAlertMessage, doConsoleMessage};

Also Classes can be exported-imported, create in modules a file named classPerson.js and define a class Person

export class Person  {

    constructor(name, age) {

    this.name = name;

    this.age = age;

    }

    showInfo(){

        console.log(`name: ${this.name } age: ${this.age}`);

    }

}

in app.js import it and use it.

import {Person} from "./modules/classPerson";

const personA = new Person("Fulanito", 50);

personA.showInfo();

Use de default keyword to export by default the class or function between many others in the file.

export default class Person  {

    constructor(name, age) {

    this.name = name;

    this.age = age;

    }

    showInfo(){

        console.log(`name: ${this.name } age: ${this.age}`);

    }

}

import in app.js, no need to use {}

import Person from "./modules/classPerson";

const personA = new Person("Fulanito", 50);

personA.showInfo();

 The keyword to identify the class imported now can be renamed

import PersonRenamed from "./modules/classPerson";

const personA = new PersonRenamed("Fulanito", 50);

personA.showInfo();

Also the export keyword can be writen at the end of module file

class Person  {

    constructor(name, age) {

    this.name = name;

    this.age = age;

    }

    showInfo(){

        console.log(`name: ${this.name } age: ${this.age}`);

    }

}

export default Person;

On all this operations the command npm run build generate the respective message in console specifying error or success on transpiling.

 $ npm run build

> @ build D:\Descargas\Tutorial2021\ReactCrashCourse2021\ES6
> webpack --watch

asset bundle.js 4.45 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 363 bytes
  ./src/app.js 182 bytes [built] [code generated]
  ./src/modules/alertMessage.js 181 bytes [built] [code generated]

WARNING in ./src/app.js 4:0-16
export 'doConsoleMessage' (imported as 'doConsoleMessage') was not found in './modules/alertMessage' (possible exports: doAlertMessage)

webpack 5.51.1 compiled with 1 warning in 614 ms
asset bundle.js 4.53 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 369 bytes
  ./src/app.js 182 bytes [code generated]
  ./src/modules/alertMessage.js 187 bytes [built] [code generated]
webpack 5.51.1 compiled successfully in 45 ms
asset bundle.js 4.54 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cached modules 182 bytes [cached] 1 module
./src/modules/alertMessage.js 220 bytes [built] [code generated]
webpack 5.51.1 compiled successfully in 47 ms
asset bundle.js 4.55 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cached modules 182 bytes [cached] 1 module
./src/modules/alertMessage.js 234 bytes [built] [code generated]
webpack 5.51.1 compiled successfully in 41 ms
asset bundle.js 4.4 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 329 bytes
  ./src/app.js 109 bytes [built] [code generated]
  ./src/modules/classPerson.js 220 bytes [built] [code generated]
webpack 5.51.1 compiled successfully in 41 ms
asset bundle.js 5.21 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cached modules 109 bytes [cached] 1 module
./src/modules/classPerson.js 1.01 KiB [built] [code generated]
webpack 5.51.1 compiled successfully in 162 ms
assets by status 5.21 KiB [cached] 1 asset
cached modules 109 bytes (javascript) 670 bytes (runtime) [cached] 4 modules
./src/modules/classPerson.js 1.01 KiB [built]
webpack 5.51.1 compiled successfully in 38 ms
assets by status 5.21 KiB [cached] 1 asset
cached modules 1.01 KiB (javascript) 670 bytes (runtime) [cached] 4 modules
./src/app.js 109 bytes [built]
webpack 5.51.1 compiled successfully in 19 ms
asset bundle.js 5.22 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cached modules 109 bytes [cached] 1 module
./src/modules/classPerson.js 1.02 KiB [built] [code generated]
webpack 5.51.1 compiled successfully in 62 ms
asset bundle.js 5.23 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 1.15 KiB
  ./src/app.js 109 bytes [code generated]
  ./src/modules/classPerson.js 1.04 KiB [built] [code generated]

WARNING in ./src/app.js 2:18-24
export 'Person' (imported as 'Person') was not found in './modules/classPerson' (possible exports: default)

webpack 5.51.1 compiled with 1 warning in 54 ms
asset bundle.js 5.23 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cached modules 1.04 KiB [cached] 1 module
./src/app.js 105 bytes [built] [code generated]
webpack 5.51.1 compiled successfully in 45 ms
assets by status 5.23 KiB [cached] 1 asset
cached modules 1.04 KiB (javascript) 670 bytes (runtime) [cached] 4 modules
./src/app.js 105 bytes [built]
webpack 5.51.1 compiled successfully in 21 ms
asset bundle.js 5.23 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cached modules 1.04 KiB [cached] 1 module
./src/app.js 119 bytes [built] [code generated]
webpack 5.51.1 compiled successfully in 25 ms
asset bundle.js 5.31 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cached modules 119 bytes [cached] 1 module
./src/modules/classPerson.js 1.03 KiB [built] [code generated]
webpack 5.51.1 compiled successfully in 51 ms

In order to check the progress of the codification and their errors.

eot