技術標籤：javaScriptnodejsvuejavascriptnodejses6前端

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

結尾

覺得有用就點贊關注加評論吧，

覺得哪裡有問題可以評論留言。