參考自阮一峰大神的教程:命令宣告:如有問題,還請各位大神及時指正
es6環境下,乙個模組就是乙個獨立的檔案。該檔案內部的所有變數,外部無法獲取。如果你希望外部能夠讀取模組內部的某個變數,就必須使用export關鍵字輸出該變數。
在src目錄下,新建common資料夾,新建profile.js,現在我們在profile.js裡面加入以下**
等價於export
var firstname = 'michael';
export
var lastname = 'jackson';
export
var year = 1958;
export
const succmsgcode=0;
es6會將,profile.js視為乙個模組,所以如果希望外部能訪問這三個變數,需要將其匯出。但是應該優先考慮使用第二種寫法。因為這樣就可以在指令碼尾部,一眼看清楚輸出了哪些變數。var firstname = 'michael';
var lastname = 'jackson';
var year = 1958;
const succmsgcode= 0;
export ;
在src目錄下的main.js檔案中 中加入以下**:
就會看到firstname,lastname,year, succmsgcode正常輸出了,但是此種方法是作為變數匯入匯出的,所以名稱必須一致。除非使用 as 命令指定新的名稱,例如:import from 'common/profile';
console.log('firstname\t' + firstname);
console.log('lastname\t' + lastname);
console.log('year\t' + year);
console.log('succmsgcode\t' + succmsgcode);
匯入時指定別名
我們看到succmsgcode1正常顯示『hello world!』export ;
import from
'common/profile';
console.log('succmsgcode\t' + succmsgcode1);
或者,匯出時指定別名
我們看到succmsgcode 正常顯示『hello world!』export ;
import from
'common/profile';
console.log('succmsgcode \t' + succmsgcode2);
還可以直接使用以下語法:
export from …;
我們建議直接使用此種語法,方便又直觀,一般不在import時做別名處理。
export 不僅能匯出變數,還能匯出函式和類
在profile.js中加入以下**:
上面**對外輸出乙個函式multiply。export function
multiply
(x, y) ;
在main.js 中加入以下**:
multiply函式被列印出來import from
'common/profile';
console.log('multiply\t' + multiply);
如果將profile.js中的**修改為:
等價於export multiply = function
(x, y) ;
如果將export 修改為 export default 則之前的匯入匯出變數皆不能使用,因為export default只允許function
multiply
(x, y) ;
export ;
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命令輸入。不同的匯出方式對應不同的匯入方式。匯出可以分為兩種 名字匯出,...