Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to export ES6 modular export and import". In daily operation, I believe many people have doubts about how to export ES6 modular export and import. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to export ES6 modular export and import". Next, please follow the editor to study!

Promise

The Promise/A+ specification specifies that the Promise object is a finite state machine. It has three states:

Pending (in progress)

Resolved (completed)

Rejected (failed)

Where pending is the initial state, and Resolved and rejected are the end state (indicating that the life cycle of the promise is over).

Using two then is asynchronous programming serialization, avoiding scary callbacks:

Var wait1000 = new Promise (function (resolve, reject) {setTimeout (resolve, 1000);}); wait1000 .then (function () {console.log ("Hello"); / / output "Hello" return wait1000;} in 1 second) .then (function () {console.log ("Fundebug"); / / output "Fundebug"} in 2 seconds)

Modular export and import

Export and import keywords are used in ES6 to achieve modularization.

Export is used to output this module variable interface (usually a file can be used as a module); import is used to load another module with export interface in one module.

Export the module file app.js:

Class Human {constructor (name) {this.name = name;} sleep () {console.log (this.name + "is sleeping");}} function walk () {console.log ('I am walking');} function play () {console.log ('I am playing');} export {Human, walk}

The module exports two objects: the Humanclass and the walk function, which can be used by other files. The play function is not exported, so this module is private and cannot be used by other files.

Then import the app.js module by main.js.

Import {Human, walk} from 'app.js'

We can use the keyword default to label objects as default object exports. The default keyword can only be used once in each module.

... / export default App for classes, functions, etc.

Import app.js module in main.js

Import App from 'app.js'

ES6 Transcoder: Babel

Since not all browsers are currently compatible with all the features of ES6, you need to convert ES6 code to ES5 code before it can be executed in an existing environment. Babel is a widely used ES6 transcoder.

We can install the Babale command line environment in the local environment.

Install and use babel:

/ / 1. Install babel-cli (for using babel on the terminal) npm install-g babel-cli / /

two。 Install babel-preset-es2015 plug-in npm install-- save babel-preset-es2015 / /

3. Create the file .babelrc in the current directory, and then write in the file: {"presets": ['es2015']} / /

4. An example of command exercise: es

Output 5.js to babel es6.js-o es5.js in es5.js file after conversion

At this point, the study on "how to export ES6 modular export and import" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.