es6環境中,export與import使用方法

2022-07-26 08:09:08 字數 2412 閱讀 5437

參考自阮一峰大神的教程:命令

宣告:如有問題,還請各位大神及時指正

es6環境下,乙個模組就是乙個獨立的檔案。該檔案內部的所有變數,外部無法獲取。如果你希望外部能夠讀取模組內部的某個變數,就必須使用export關鍵字輸出該變數。

在src目錄下,新建common資料夾,新建profile.js,現在我們在profile.js裡面加入以下**

export

var firstname = 'michael';

export

var lastname = 'jackson';

export

var year = 1958;

export

const succmsgcode=0;

等價於

var firstname = 'michael';

var lastname = 'jackson';

var year = 1958;

const succmsgcode= 0;

export ;

es6會將,profile.js視為乙個模組,所以如果希望外部能訪問這三個變數,需要將其匯出。但是應該優先考慮使用第二種寫法。因為這樣就可以在指令碼尾部,一眼看清楚輸出了哪些變數。

在src目錄下的main.js檔案中 中加入以下**:

import  from 'common/profile';

console.log('firstname\t' + firstname);

console.log('lastname\t' + lastname);

console.log('year\t' + year);

console.log('succmsgcode\t' + succmsgcode);

就會看到firstname,lastname,year, succmsgcode正常輸出了,但是此種方法是作為變數匯入匯出的,所以名稱必須一致。除非使用 as 命令指定新的名稱,例如:

匯入時指定別名

export ;

import from

'common/profile';

console.log('succmsgcode\t' + succmsgcode1);

我們看到succmsgcode1正常顯示『hello world!』

或者,匯出時指定別名

export ;

import from

'common/profile';

console.log('succmsgcode \t' + succmsgcode2);

我們看到succmsgcode 正常顯示『hello world!』

還可以直接使用以下語法:

export  from …;
我們建議直接使用此種語法,方便又直觀,一般不在import時做別名處理。

export 不僅能匯出變數,還能匯出函式和類

在profile.js中加入以下**:

export function

multiply

(x, y) ;

上面**對外輸出乙個函式multiply。

在main.js 中加入以下**:

import  from

'common/profile';

console.log('multiply\t' + multiply);

multiply函式被列印出來

如果將profile.js中的**修改為:

export multiply = function

(x, y) ;

等價於

function

multiply

(x, y) ;

export ;

如果將export 修改為 export default 則之前的匯入匯出變數皆不能使用,因為export default只允許export出現一次,而且在使用匯入時,不需要加{},**如下

function

multiply

(x, y) ;

export default ;

import multiply from 'common/profile';

如果需要匯出整個檔案,可使用如下**

export

default ;

},methods:

}};

工程實戰 ES6環境配置

最近在學習es6語法,故有了從零開始搭建es6環境的想法。下面第一部分是單純的es6環境配置,第二部分是基於webpack環境的工程配置 devdependencies 1 babel cli 用於命令列轉碼 2 babel preset env 將基於你的實際瀏覽器及執行環境,自動的確定babel...

ES6環境搭建及react router學習

一 起因 es6新納入了很多振奮人心的新特性,真的很讓人忍不住去嘗試一下。不過,由於現在大部分的瀏覽器對es6的支援程度都不是很好。所以如果想要放心地使用一些新特性,還需要用一些工具,將es6或者es7的 轉為es5的 今天,就配置了一下環境,寫了乙個react router,主要是練習自己的程式設...

ES6中的export與import入門

es6在語言規格的層面上,實現了模組功能,而且實現得相當簡單,完全可以取代現有的commonjs和amd規範,成為瀏覽器和伺服器通用的模組解決方案。es6 模組不是物件,而是通過export命令顯式指定輸出的 再通過import命令輸入。不同的匯出方式對應不同的匯入方式。匯出可以分為兩種 名字匯出,...