import、export使用介紹

ES6提供的import、export方法， 使組件化開發模式邁向新高度。本文來介紹import、export的語法及使用方法。

根據 export 的導出方式，可以概括為命名導出、默認導出兩種方式。

命名導出常用語法：

export { name1, name2, ..., nameN };  
export { variable as name1, variable as name2, ..., nameN };  
export const name1 = ..., name2 = ..., nameN; // also var, let  
export * from ...;  
export { name1, name2, ..., nameN } from ...;  
export { import1 as name1, import2 as name2, ..., nameN } from ...;  

默認導出：

export default expression;
export default function() { ... }; // also class, function*
export default function name1() { ... }; // also class, function*
export { name1 as default, ... };

對應 export 的多種導出方式，import 也有多種倒入方式，使調用方式更加靈活多變。

import 使用語法如下：

import defaultExport from 'module-name';
import * as name from 'module-name';
import { exportName1, exportName2, ... } from 'module-name';
import { exportName1, exportName2 as alias, ... } from 'module-name';
import defaultExport, * as name from 'module-name';
import 'module-name';

---

接下來，我們將根據常見使用場景來舉例說明使用方法。

導出已聲明的變量或函數：

util.js

const aaa = 'aaa';

function cube(x) {
  return x * x * x;
}

// 導出已聲明的變量時，只能用這種方式，否則會報錯
export { aaa, cube };

上述導出的引用方式如下：

index.js

import { aaa, cube } from './util';

console.log(aaa, cube);  //  'aaa' 8

考慮到導出變量名 aaa 的語義化辨識度低，可考慮如下引入方式：

import { aaa as baseStr, cube } from './util';

console.log(baseStr, cube(2)); // 'aaa', 8

此時，若在index.js文件中調用變量aaa，會提示" aaa is not defined " 。

變量命名費時費心還怕沖突嗎？直接導入整個模塊也不錯：

import * as util from './util';

console.log(util.aaa, util.cube(2)); // 'aaa' 8

若只需引入 cube 方法，引用方式如下：

import { cube } from './util';

console.log(cube(2)); // 8

也可以直接導出聲明的變量或函數，如下：

export const aaa = 'aaa';

export function cube(x) {
  return x * x * x;
}

使用方式與先聲明再導入的使用方式一致，不在贅述。

---

export 方式決定了 import 方式。上述的多種引入方式中，引入的變量名都是固定的，即引入的變量名必須與導出的變量名保持一致。而 export 的默認導出卻能打破這個限制。

可以被設置為默認導出的，有以下幾種情況：

默認導出函數：

util.js

export default function cube(x) {
  return x * x * x;
}

index.js

import math from './util';

console.log( math(2)); // 8

默認導出類：

util.js

export default class {
  constructor (name, age) {
    this.name = name;
    this.age = age;
  }
}

index.js

import Person from './util';

const obj =  new Person('xiaoming', 24);

console.log( obj ) ;  //  { name: 'xiaoming', age: 24 }

默認導出表達式：

util.js

export default 1 + 2;

index.js

import result from './util';

console.log( result ) ; // 3

注：不能使用var、let、const語句直接作為默認導出，可以聲明變量后再作為導出
錯誤示例：

export default const aaa = 'aaa';

正確示例：

const aaa = 'aaa';

export default aaa;

默認導出的其他嘗試：

1，每個組件只能有一個默認導出語句，否則會報錯 "Duplicate export 'default'"
2，一個組件包含默認導出與命名導出，如下：
util.js

const aaa = 'aaa';

export { aaa };
export default 1 + 2; 

index.js

import result, { aaa } from './util’;  // 默認導出命名在前，否則會報錯

console.log( result, aaa ) ; // 3 'aaa'

兼容性

截止目前，有些瀏覽器並不支持 import 與 export 方法，在實際項目中多使用轉換器做轉換來實現，常用轉換器有：Babel、Webpack、Rollup等。