ES6 module 模块化导入导出的几种方式

1. 命名导出(named exports) 用export关键字：

 

export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

然后在另一个文件中这样引用：

import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3));

或者：

 import * as lib from 'lib';
 square = lib.square;

不过值得注意的一点是，如果你直接用babel编译，执行是会报错的。因为 babel 并不会完全编译 modules，他只是把 ES6 的modules语法编译成了 CMD 的语法，所以还需要用 browserify 之类的工具再次编译一遍。 
如果你发现 browserify 找不到 lib，可以改成 from ‘./lib’ 试试。

 

2. 默认导出

 //------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();

 

3. 命名导出结合默认导出

默认导出同样可以结合命名导出来使用：

export default function (obj) {
    ...
};
export function each(obj, iterator, context) {
    ...
}
export { each as forEach };

 

上面的代码导出了一个默认的函数，然后由导出了两个命名函数，我们可以这样导入：

 import _, { each } from 'underscore';

 

注意这个逗号语法，分割了默认导出和命名导出

其实这个默认导出只是一个特殊的名字叫 default，你也可以就直接用他的名字，把它当做命名导出来用，下面两种写法是等价的：

import { default as foo } from 'lib';
import foo from 'lib';

 

同样的，你也可以通过显示指定 default 名字来做默认导出, 下面两种写法是一样的：

 //------ module1.js ------
export default 123;

//------ module2.js ------
const D = 123;
export { D as default };

 

4.仅支持静态导入导出

ES6规范只支持静态的导入和导出，也就是必须要在编译时就能确定，在运行时才能确定的是不行的，比如下面的代码就是不对的：

//动态导入
var mylib;
if (Math.random()) {
    mylib = require('foo');
} else {
    mylib = require('bar');
}
//动态导出
if (Math.random()) {
    exports.baz = ...;
}

　　

为什么要这么做，主要是两点：

1. 性能，在编译阶段即完成所有模块导入，如果在运行时进行会降低速度
2. 更好的检查错误，比如对变量类型进行检查

5. 别名导入和文件夹导入

在webpack 可以配置别名导入 ，在webpack导入文件夹时会在文件夹中找到index.js文件导入。

index.js 文件的一般写法：

const files = require.context('.', true, /\.js/)
const modules = {}

files.keys().forEach((key) => {
  if (key === './index.js' || key === './utils.js') {
    return
  }
  modules[key.replace(/(^\.\/|\.js$)/g, '')] = files(key).default
})

export default modules

 

5. 各种导入和导出方式总结

总结一下，ES6提供了如下几种导入方式：

// Default exports and named exports
import theDefault, { named1, named2 } from 'src/mylib';
import theDefault from 'src/mylib';
import { named1, named2 } from 'src/mylib';

// Renaming: import named1 as myNamed1
import { named1 as myNamed1, named2 } from 'src/mylib';

// Importing the module as an object
// (with one property per named export)
import * as mylib from 'src/mylib';

// Only load the module, don’t import anything
import 'src/mylib';

如下几种导出方式：

 //命名导出
export var myVar1 = ...;
export let myVar2 = ...;
export const MY_CONST = ...;

export function myFunc() {
    ...
}
export function* myGeneratorFunc() {
    ...
}
export class MyClass {
    ...
}
// default 导出
export default 123;
export default function (x) {
    return x
};
export default x => x;
export default class {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
};
//也可以自己列出所有导出内容
const MY_CONST = ...;
function myFunc() {
    ...
}

export { MY_CONST, myFunc };
//或者在导出的时候给他们改个名字
export { MY_CONST as THE_CONST, myFunc as theFunc };

//还可以导出从其他地方导入的模块
export * from 'src/other_module';
export { foo, bar } from 'src/other_module';
export { foo as myFoo, bar } from 'src/other_module';

refer from: https://blog.csdn.net/lihongxun945/article/details/49031383

http://2ality.com/2014/09/es6-modules-final.html

转载于:https://www.cnblogs.com/wtaog/p/9070313.html