![c524bd3e97a8a59e990be0047000620e.png](https://i-blog.csdnimg.cn/blog_migrate/9c4a3c41f90ddc9c4a890ed0c584bbf2.jpeg)
目前基于webpack、rollup等构建工具进行开发,模块化已经是常态,基本的import、export操作少不了,这里对常用的一些方法做一下总结。
ES6模块只支持静态导出,你只可以在模块的最外层作用域使用export
,不可在条件语句中使用,也不能在函数作用域中使用。
exports的几种用法
1. Named exports (导出每个 函数/变量)
名字导出,这种方式导出多个函数,一般使用场景比如 utils、tools、common 之类的工具类函数集,或者全站统一变量等。
只需要在变量或函数前面加 `export` 关键字即可。
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main.js 使用方式1 ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
//------ main.js 使用方式2 ------
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5
我们也可以直接导出一个列表,例如上面的lib.js可以改写成:
//------ lib.js ------
const sqrt = Math.sqrt;
function square(x) {
return x * x;
}
function add (x, y) {
return x + y;
}
export {sqrt, square, add}
2. Default exports (导出一个默认 函数/类)
这种方式比较简单,一般用于一个类文件,或者功能比较单一的函数文件使用。一个模块中只能有一个export default默认输出。
export default与export的主要区别有2个:
- 不需要知道导出的具体变量名
- 导入(import)时不需要{}
//------ myFunc.js ------
export default function () { ... };
//------ main.js ------
import myFunc from 'myFunc';
myFunc();
导出一个类
//------ MyClass.js ------
class MyClass{
constructor() {}
}
export default MyClass;
//------ Main.js ------
import MyClass from 'MyClass';
注意这里默认导出不需要用{}。
3. Mixed exports (混合导出)
混合导出,也就是 上面第一点和第二点结合在一起的情况。比较常见的比如 Lodash,阿里 Fusion之类的库都是这种组合方式。
//------ lib.js ------
export var myVar = ...;
export let myVar = ...;
export const MY_CONST = ...;
export function myFunc() {
...
}
export function* myGeneratorFunc() {
...
}
export default class MyClass {
...
}
// ------ main.js ------
import MyClass, {myFunc} from 'lib';
再比如lodash例子:
//------ lodash.js ------
export default function (obj) {
...
};
export function each(obj, iterator, context) {
...
}
export { each as forEach };
//------ main.js ------
import _, { each } from 'lodash';
4. Re-exporting (别名导出)
一般情况下,export输出的变量就是在原文件中定义的名字,但也可以用 as 关键字来指定别名,这样做一般是为了简化或者语义化export的函数名。
//------ lib.js ------
export function getUserName(){
...
};
export function setName(){
...
};
//输出别名,在import的时候可以同时使用原始函数名和别名
export {
getName as get, //允许使用不同名字输出两次
getName as getNameV2,
setName as set
}
5. Module Redirects (中转模块导出)
有时候为了避免上层模块导入太多的模块,我们可能使用底层模块作为中转,直接导出另一个模块的内容如下:
//------ myFunc.js ------
export default function() {...};
//------ lib.js ------
export * from 'myFunc';
export function each() {...};
//------ main.js ------
import myFunc,{ each } from 'lib';
错误的export用法
export 只支持在最外层静态导出、只支持导出变量、函数、类,如下的几种用法都是错误的。
//直接输出变量的值
export 'Mark';
//未使用中括号 或 未加default
// 当只有一个导出数,需加default,或者使用中括号
var name = 'Mark';
export name;
//export不要输出块作用域内的变量
function(){
var name = 'Mark';
export {name};
}
import的几种用法
import的用法和export是一一对应的,但是import支持静态导入和动态导入两种方式,动态import支持晚一些,兼容性要差一些,目前Chrome浏览器和Safari浏览器支持。
1. Import an entire module's contents (导入整个模块)
当export有多个函数或变量时,如文中export的第一点,可以使用 * as 关键字来导出所有函数及变量,同时 as 后面跟着的名称做为 该模块的命名空间。
//导出lib的所有函数及变量
import * as lib from 'lib';
//以 lib 做为命名空间进行调用,类似于object的方式
console.log(lib.square(11)); // 121
2. Import a single/multiple export from a module
从模块文件中导入单个或多个函数,与 * as namepage 方式不同,这个是按需导入。如下例子:
//导入square和 diag 两个函数
import {square, diag} from 'lib';
// 只导入square 一个函数
import {square} from 'lib';
// 导入默认模块
import _ from 'lodash';
// 导入默认模块和单个函数,这样做主要是简化单个函数的调用
import _, { each } from 'lodash';
3. Rename multiple exports during import
和 export 一样,也可以用 as 关键字来设置别名,当import的2个类的名字一样时,可以使用 as 来重设导入模块的名字,也可以用as 来简化名称。如下例子:
// 用as 来 简化函数名称
import {
reallyReallyLongModuleExportName as shortName,
anotherLongModuleName as short
} from '/modules/my-module.js';
// 避免重名
import { lib as UserLib} from "ulib";
import { lib as GlobalLib } from "glib";
4. Import a module for its side effects only
有时候我们只想import进来,不需要调用,很常见的,比如在webpack构建时,我们经常import css 进来,或者import一个类库进来。
// 导入css
import './mystyle.css';
// 导入类库
import 'axios';
5. Dynamic Imports
静态import在首次加载时候会把全部模块资源都下载下来,但是,我们实际开发时候,有时候需要动态import(dynamic import),例如点击某个选项卡,才去加载某些新的模块,这个动态import特性浏览器也是支持的。
// 当动态import时,返回的是一个promise
import('/modules/my-module.js')
.then((module) => {
// Do something with the module.
});
// 上面这句实际等同于
let module = await import('/modules/my-module.js');
es7的新用法:
async function main() {
const myModule = await import('./myModule.js');
const {export1, export2} = await import('./myModule.js');
const [module1, module2, module3] =
await Promise.all([
import('./module1.js'),
import('./module2.js'),
import('./module3.js'),
]);
}
main();
参考资料:
- https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
- http://2ality.com/2014/09/es6-modules-final.html
- https://hackernoon.com/import-export-default-require-commandjs-javascript-nodejs-es6-vs-cheatsheet-different-tutorial-example-5a321738b50f