Welcome Guest! (App Version 3.1)

websitnero logo name

Modules in ES6

Concept of Modules

Modules are conceptually packages that contain a set of code that performs a certain task. Also, this package can be imported or exported as a whole in various Projects and is reusable. The Module does not expose the full functionality or code to the outside world, but only those which are required. Rest of the code within a module can freely interact with each other.

To understand better you can say that a module is only a chunk of JavaScript code written in a separate file. The variables, constants, functions that are inside it are not available for use to the outside world unless this module file exports them and then inreturn the file is imported somewhere which then can access its code and reuse it.

Modules help you to write some code inside it while exposing only those specific parts of code that are intended to be accessed or shared to outside world.

Transpilation of Module Code

As Modules are concept of ES6 and are not understood by browsers that still understand only Vanilla JS or ES5 so your code inside modules and the file itself needs to be Transpiled or converted to ES5 before being used or understood by Browsers.

Common ways to Transpile your code includes using:

  • Gulp
  • Grunt
  • Babel
  • NodeJS

Exporting a Module

Use the Export keyword to export whatever is written inside a module:

Export default someModule;

Importing only some specific elements but not the complete Module:

Export {elem1, elem2, elem3} from someModule;

Importing a Module

Use the Import keyword to import whatever is accessible inside some other module:

Import someModule from './someModule';

Importing only some pieces but not complete Module (in case it is a big Module with multiple chunks of functionalities):

Import {elem1, elem2, elem3} from './someModule';

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.