一文搞懂js文件引用：Commonjs、Es Modules

最开始学js的时候最头疼的就是module.exports、require、export、import各种乱七八糟的文件引用语法：他们到底有什么区别？要弄明白这些语法，首先要区分开js的两种文件引用机制：Commonjs和Es Module

一、Commonjs

最早的js只有Commonjs机制，这种机制的引用语法也最简单，直接看代码：

新建文件夹commonjs_test，新建文件library.js、main.js：

1. 写法一：整体导出（module.exports = {一个object}）

// library.js
const A = 1;
const b = 2;
module.exports = { A, B: b };

// main.js
const { A, B } = require('./library.js');
console.log(A, B);

 2. 写法二：逐个导出（exports.导出变量名 = ...）

// library.js
exports.A = 1;
exports.B = 2;

// main.js
const { A, B } = require('./library.js');
console.log(A, B);

命令行运行：“node ./main.js”，正常输出“1 2”

其实要申明一个Commonjs的项目，按理还需要在commonjs_test文件夹下新建package.json：

{
    "type": "commonjs"
}

但就算没有package.json，node还是会按默认commonjs执行～

 二、Es Modules

新建文件夹esmodules_test，新建文件library.js、main.js：

1. 写法一：匿名导出（export default）

// library.js
const A = 1;
export default A;

// 或者直接
export default 1;

// main.js
import nameDoesNotMatter from './library.js'; // 匿名导出时，import引入无所谓名字

console.log(nameDoesNotMatter);

 2. 写法二：具名、逐个导出（export 变量申明）

// library.js
export const A = 1;
export const B = 1;

// main.js
const { A, B } = require('./library.js');
console.log(A, B);

  3. 写法三：具名、批量导出（export {变量名1, 变量名2 as 别名}）

// library.js
const A = 1;
const b = 2;
export { A, b as B }

// main.js
const { A, B } = require('./library.js');
console.log(A, B);

直接命令行运行：“node ./main.js”，报错：“SyntaxError: Cannot use import statement outside a module”

这是因为node默认一个项目是Commonjs的，要想使用Es Modules，在esmodules_test文件夹下新建package.json：

{
    "type": "module"
}

正常执行

需要注意一个文件中可以有多个具名export，但只能有一个匿名export，如：

// library.js
const A = 1;
const B = 2;
export default A;
export default B;

报错：“SyntaxError: Identifier '.default' has already been declared”

但是多个具名+一个匿名混用是可以的：

// library.js
const A = 1;
const B = 2;
const C = 3;

export { A, B }
export default C;

// main.js
import C, { A, B } from './library.js';
console.log(A, B, C);

差不多写这么多～