es6 export import

 export語句輸出的接口，與其對應的值是動態綁定關係，即通過該接口，可以取到模塊內部實時的值。

具名export/import

// 第一種寫法
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

// 函數
export function multiply(x, y) {
  return x * y;
};

// 第二種寫法
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export { firstName, lastName, year };

// 函數
function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

//"單個"引入
//方法一
import { firstName, lastName, year } from './profile.js';
//方法二
import { lastName as surname } from './profile.js';
//整體引入
import * as circle from './circle';

console.log('圓面積：' + circle.area(4));
console.log('圓周長：' + circle.circumference(14));

default  export/import 

前面使用import命令的時候，用戶需要知道所要加載的變量名或函數名，否則無法加載。但是，用戶肯定希望快速上手，未必願意閱讀文檔，去了解模塊有哪些屬性和方法。

爲了給用戶提供方便，讓他們不用閱讀文檔就能加載模塊，就要用到export default命令，爲模塊指定默認輸出。

// export-default.js
// 寫法一 匿名函數
export default function () {
  console.log('foo');
}
//寫法二 具名函數
// export-default.js
export default function foo() {
  console.log('foo');
}

// 或者寫成
function foo() {
  console.log('foo');
}
export default foo;

// 其他模塊加載該模塊時，import命令可以爲該匿名函數指定任意名字。
// import命令後面，不使用大括號。
// import-default.js
import customName from './export-default';
customName(); // 'foo'

//同時加載具名和匿名
import _, { each, forEach } from 'lodash';

 動態加載 import()

import()返回一個 Promise 對象,

import()函數可以用在任何地方，不僅僅是模塊，非模塊的腳本也可以使用。它是運行時執行，也就是說，什麼時候運行到這一句，就會加載指定的模塊。另外，import()函數與所加載的模塊沒有靜態連接關係，這點也是與import語句不相同。import()是異步加載.

比如說成用在vue-router中動態加載組件

{
      path: '/news',
      name: 'news',
      // import() 動態加載，返回一個Promise對象，什麼時候運行到這一句，纔會加載指定的模塊，爲異步加載。
      component: () => import('@/components/news'),
      meta: { title: 'news' }
    },