Js模块化导入导出

Js模块化导入导出

导出1：

// 1.js
var a  = 1;
var b = function(){
    console.log(a);
}

module.exports = {
    a: a,
    b: b
}

导入1：

// 1-1.js
var m1 = require("./1.js")
console.log(m1.a); // 1
m1.b(); // 1

or(es6)

// 1-2.js
import m1 from './1.js'
console.log(m1.a); // 1
m1.b(); // 1

// or

import {a, b} from './1.js'
console.log(a); // 1
b(); // 1

导出2：

// 2.js
var a  = 2;
var b = function(){
    console.log(a);
}
exports.a = a;
exports.b = b;

// exports = { a, b } // 不能这么写，这样就改变了exports的指向为一个新对象而不是module.exports

导入2：

// 2-1.js
var m1 = require("./2.js")
console.log(m1.a); // 2
m1.b(); // 2

or(es6)

// 2-2.js
import m1 from './2.js'
console.log(m1.a); // 2
m1.b(); // 2

// or

import {a, b} from './1.js'
console.log(a); // 2
b(); // 2

导出3(es6)：

// 导出单个特性
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

// 导出列表
export { name1, name2, …, nameN };

// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };

// 解构导出并重命名
export const { name1, name2: bar } = o;

// 默认导出
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// 导出模块合集
export * from …; // does not set the default export
export * as name1 from …; // Draft ECMAScript® 2O21
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

导入3(es6)：

// name－从将要导入模块中收到的导出值的名称
// member, memberN－从导出模块，导入指定名称的多个成员
// defaultMember－从导出模块，导入默认导出成员
// alias, aliasN－别名，对指定导入成员进行的重命名
// module-name－要导入的模块。是一个文件名
// as－重命名导入成员名称（“标识符”）
// from－从已经存在的模块、脚本文件等导入
import defaultMember from "module-name"; // 不加{}即导入export default 
import * as name from "module-name"; 
import { member } from "module-name"; // 导入export 按需导入
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";  // 导入export
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name"; // 将运行模块中的全局代码, 但实际上不导入任何值。

参考：

https://segmentfault.com/a/1190000010426778
https://www.cnblogs.com/leftJS/p/11073481.html
https://www.cnblogs.com/zhoulujun/p/9415407.html
https://www.cnblogs.com/zhoulujun/p/9415407.html
https://www.cnblogs.com/moxiaowohuwei/p/8692359.html

结尾

觉得有用就点赞关注加评论吧，

觉得哪里有问题可以评论留言。