ES6模塊化export和import怎么導出

這篇文章主要介紹“ES6模塊化export和import怎么導出”，在日常操作中，相信很多人在ES6模塊化export和import怎么導出問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”ES6模塊化export和import怎么導出”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

Promise

Promise/A+規范, 規定Promise對象是一個有限狀態機。它有三個狀態：

pending（執行中）

Resolved（已完成）

Rejected（已失敗）

其中pending為初始狀態，Resolved和rejected為結束狀態（表示promise的生命周期已結束）。

使用兩個then是異步編程串行化，避免了恐怖的回調：

var wait1000 = new Promise(function(resolve, reject) {    setTimeout(resolve, 1000); }); wait1000    .then(function()    {        console.log("Hello"); // 1秒后輸出"Hello"        return wait1000;    })    .then(function()    {        console.log("Fundebug"); // 2秒后輸出"Fundebug"    });

模塊化export和import

ES6中使用export與import關鍵詞實現模塊化。

export用于對外輸出本模塊變量的接口（一般一個文件可以作為一個模塊）； import則用于在一個模塊中加載另一個含有export接口的模塊。

導出模塊文件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 }

模塊導出了兩個對象：Human類和walk函數，能被其他文件使用。而play函數沒有導出，為此模塊私有，不能被其他文件使用。

然后再main.js導入app.js模塊。

import { Human, walk } from 'app.js';

我們可以使用關鍵字default，可將對象標注為default對象導出。default關鍵字在每一個模塊中只能使用一次。

... //類，函數等 export default App;

在main.js導入app.js模塊

import App from 'app.js';

ES6轉碼器: Babel

由于目前并不是所有的瀏覽器都能兼容ES6的全部特性，所以需要將ES6代碼轉為ES5代碼，才可以在現有的環境中執行。而Babel是一個廣泛使用的ES6轉碼器。

我們可以在本地環境中安裝Babale命令行環境。

安裝和使用babel：

//1.安裝babel-cli（用于在終端使用babel） npm install -g babel-cli //

2.安裝babel-preset-es2015插件 npm install --save babel-preset-es2015 //

3.在當前目錄下建立文件.babelrc，接著在文件中寫入： { 　"presets": ['es2015'] } //

4.命令行使用實例：將es

5.js轉換后輸出到es5.js文件中 babel es6.js -o es5.js

到此，關于“ES6模塊化export和import怎么導出”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！