nodejs的import和export，如何编写执行es6模块？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

在nodejs世界里面，模块化是非常常见的事情。正常情况下，大家都是遵守commonjs规范编写模块的，也就是使用require()引用模块，使用module.exports导出模块。在本文中，苏南大叔说的是es6模块，这种编写代码的方式，是nodejs的发展潮流，目前虽然还没有大规模普及。但是，在不久的将来，import的方式将会取代require的方式。

大家好，这里是苏南大叔的“程序如此灵动”博客，这里讲述苏南大叔和计算机代码的故事。使用import还是require，大家可以自行分辨。nodejs普遍支持commonjs标准的require语句，而目前并不是普遍支持es6 module的import语句。本文测试环境：win10，node@16.14.0。本文描述的场景是通过node命令执行的场景，并不是浏览器里面使用import的场景。

本文使用场景及姿势

node里面目前一共有两种模块模式，一个是commonjs，另外一个是es6 module。另外一篇兄弟文章是：

• https://newsn.net/say/commonjs.html

在本文中，nodejs默认情况下，并没有开启es6特性支持，也就是说默认是不支持import的。所以，运行本文的范例的时候，需要有特殊的小技巧。否则可能会发生下面的类似错误提示：

import {default as bb} from './lib.js';
^^^^^^
SyntaxError: Cannot use import statement outside a module

正确的打开方式

node支持import语句的方式有很多种，其中最简单的方式就是：

保存文件为.mjs，而不是通常的.js文件。这种情况下，使用node xxx.mjs语句的时候，就是默认支持es6 module特性的，其中就包括import语句。
需要注意的是：所有使用es6特性的相关文件都应该是.mjs，而不是仅仅主文件是.mjs。

本文设置了两个.mjs文件，一个是main.mjs负责主程序（import），一个是lib.mjs负责类库（export）。

node main.mjs

姿势一：导入导出default

这个default是最常见的形式。注意：在一个.mjs文件中，只能有一个default被导出。

导出的两种姿势

lib.mjs直接导出:

export default function() {
    console.log("default")
}

或者lib.mjs别名导出:

function fun(){
    console.log("fun function")
}
export {fun as default};

可以作为default导出的数据

导出的default可以是一个函数，也可以是一个变量，可以是一个字符串，也可以是个数字。

var a="a string";
export default a;

export default "aa string";

export default 123;

导入default的方式

一个文件里面可以多次导入import，还可以设置别名as。

import aa from './lib.mjs';  //默认导入default到aa变量

上面的语句，就相当于：

import {default as aa} from './lib.mjs';  //导入默认的default并且设置别名aa

姿势二：导入导出普通变量

除了导出为default，还可以导出为普通变量。这种情况下，除了default仅可以导出一份，其它的变量是可以随便导出的。

导出export

export default 1;
var a = "var a";
var bb = 'var b';
export {bb}           // 这是ES6的写法，实际上就是{b:b}
export {a,bb as b}; 
export var c = 100;
// export b;          // 报错
// export 1;          // 报错

其实关于export的写法，可以无脑的这么理解：export关键字后面不能直接接要导出的变量，或者加上个var，或者加个default，或者加个{。

导入import

import aa from './lib.mjs';
console.log(aa);
import {default as aaa,a,b,c,bb} from './lib.mjs';
console.log(aaa,a,b,c,bb);

下面的这种写法，aaa，就相当于default as aaa。

import aaa,{a,b,c,bb} from './lib.mjs';

import导入语句特别说明

下面的两个import语句

import aa from './lib.mjs';

import {aa} from './lib.mjs';

导入语句写不写花括号的区别在于：
不带花括号的话
导入的是default，相当于设置了个别名aa。相当于

import {default as aa} from './lib.mjs';

带花括号的话
导入的是名字aa，是确切的变量。同时意味着：在lib.mjs中明确导出了对应的变量aa。

查看所有的导出

可以通过import *来导出所有的数据，例如：

import * as all from './lib.mjs';
console.log(all,all.a,all.b)

all的范例数据是：

[Module: null prototype] {
  a: 'var a',
  b: 'var b',
  bb: 'var b',
  c: 100,
  default: 1
}

参考文献

• https://newsn.net/say/commonjs.html
• https://newsn.net/say/commonjs-module-exports.html
• https://newsn.net/say/commonjs-require-cache.html
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
• https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
• https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/import

总结

当然，这种commonjs也有其有问题的地方。所以，发展了新的es6模块，这里使用的组合是import和export这对组合。本文中，主要讨论import和export组合的使用方法。

• https://newsn.net/tag/es6/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。