ES6 import、export的写法

大家都知道来到ES6版本，ES就原生支持JS Module的概念。

import和export的写有哪些呢，我们看看

import:

import from 和 var 变量一样，也会存在提升，这意味着可以在 import 之前用 import 进来的东西

import './xxx.js'; // 只会执行import的js文件，但是不会引入任何值

import a, {b, c} from './xxx.js'; // 等价于 import {default as a, b, c} from './xxx.js';

import * as xxx from './xxx.js'; // 作为一个整体加载，结果为{default: xxx, b: xxx, c: xxx}

export:

let a = 123;
function addA() {
    a++;
}

export default a;  // 等价于 export default 123，执行addA不会影响default

export {a as default}; // 想执行addA影响到default，只能用as把default作为a的别称

export {a, addA}； // 等价于 export let a = 123; export functin addA(){...}

复合写法：

export {a ,b} from './xxx.js';

// 等效于
import {a, b} from './xxx.js';
export {a, b};

// 整体输出 值得注意的是 export *会把my_module的default给丢掉
export * from 'my_module';

import函数：

因为import xxx from 'xxx'的写法是编译时的语法，没办法动态加载

// 形如这样的写法是会报错的
if (x === 2) {
  import MyModual from './myModual';
}

为了实现动态加载，我们又有了import函数，跟require相似，不过是异步的

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

推荐阅读：Module的语法