Understanding the ES6 Module (Understanding ES6 Modules)

Understanding ES6 's Modules

Source: Understanding ES6 Modules.

Basic (Basic)

in the In ES6, each module is defined in its own file . variables defined in the module or functions are not visible externally.

unless you show that the with Export to export them This means that you can write code in your module and then export only those parts that need to be accessible by other parts.

The ES6 module is defined using the native definition method. If you want to export a variable from a module, you only need to use the keyword export.

Similarly, if you want to use a variable from a different module, you can use the keyword import.

Simple modules Demo (working with a easy module)

Let's create a module with two function functions.

1. Generaterandom (): Generate a random number

2. SUM (): Add two numbers.

Next, create the file utility.js:

Utility.js

Functiongeneraterandom () {    returnmath.random ()} function sum (A, b) {    return a + B;} export {generaterandom, sum }

Keyword export exports these two functions, and you can see that the two exported functions are surrounded with curly braces, and they are separated by commas.

You can also rename the exported content using the following method.

1

export {generateRandom as random, sum as doSum} Let's take a look at how the other modules are the values of those exports. App.js Import {generaterandom, sum} from ' utility '; Console.log (Generaterandom ());//logs a random Numberconsole.log (sum (1, 2));//3 Note the first line. It will import values from the utility module. Of course, if you only want to export a value (for example, sum), you can use the following method: 1 import { sum } from‘utility‘; Similarly, you can import the entire module as an object and then refer to it using the object properties method. So we can use the following method: Import ' utility ' as utils; Console.log (Utils.generaterandom ());//logs a random Numberconsole.log (Utils.sum (1, 2));//3 It's simple, isn't it? This is actually the "named import" of ES6. Next, let's look at how to use the default export. "Default Export" and "re-export," (default exports and re-exporting)If you only want to export a value from a module, you can use the default export. To demonstrate the use of the default export, we need to modify the Utility.jsutility.js var utils = { generaterandom:function () { return math.random (); }, sum:function (A, b) { return a + b ; }}; Export default utils; The last line utils this variable for export. In another module, the reference method is as follows: App.js Import utils from ' utility '; Console.log (Utils.generaterandom ());//logs a random Numberconsole.log (Utils.sum (1, 2));//3export default utils; Exports the imported value The first line of code first imports the Utils object, and you can also export it again. As the last line. These are the general introduction of ES6 Modules. Next, let's look at how to turn the ES6 module into ES5 and run and test it. Use the ES6 module converter. (Using the ES6 Module transpile) The ES6 module Converter is a ES5 code that converts your ES6 code to COMMONJS or AMD-style, which you can install using the following command. 1 npm install -g es6-module-transpile Before we convert, let's look at the structure of the code. The source code can go to GitHub download: source code 12345 es6-modules    scripts/        app.js        utility.js    out/ The Scripts folder is the code for our module, and we will compile this part of the code and place it in the out directory. Go to the Es6-modules directory and run the command. compile-modules convert-i scripts-o out app.js utility.js--format commonjs

Understanding the ES6 Module (Understanding ES6 Modules)