import 與 export 的用法

發表於 更新於 分類於 閱讀次數： Disqus：

在 js 中需要引用別支檔案的內容，通常會使用 node 的機制，或是使用 es6 的機制，這兩種常常搞混，所以特別紀錄一下用法

參考資料來源：

  1. MDN web docs:export
  2. 阮一峰 - ECMAScript6 入門 - 編程風格
  3. node.js 中 module.exports 及 exports 的差異及區別

ES6 範例 1

1
2
3
4
5
6
// data.js
export const numbers = [1, 2, 3];

// main.js
import { numbers } from "./data.js";
console.log(numbers); // [1, 2, 3]

ES6 範例 2

1
2
3
4
5
6
7
// data.js
const numbers = [1, 2, 3];
export default numbers;

// main.js
import numbers from "./data.js";
console.log(numbers); // [1, 2, 3]

node 範例 1

1
2
3
4
5
6
7
8
9
// data.js
const numbers = [1, 2, 3];
module.exports = numbers;
// 或是寫成
module.exports = [1, 2, 3];

// main.js
var numbers = require("./data.js");
console.log(numbers); // [1, 2, 3]

node 範例 2

1
2
3
4
5
6
// data.js
exports.char = ["A", "B", "C"];

// main.js
var char = require("./data.js");
console.log(char); // { char: [ 'A', 'B', 'C' ] }

node 範例 3

如果有兩個以上的匯出….混用，結果是吃 exports

1
2
3
4
5
6
7
// data.js
module.exports = [1, 2, 3];
exports.char = ["A", "B", "C"];

// main.js
var NaNiKoLeh = require("./data.js");
console.log(NaNiKoLeh); // [1, 2, 3]

使用module.exports，最終的結果是吃最後一個的

1
2
3
4
5
6
7
// data.js
module.exports = [1, 2, 3];
module.exports = ["A", "B", "C"];

// main.js
var NaNiKoLeh = require("./data.js");
console.log(NaNiKoLeh); // [ 'A', 'B', 'C' ]

這個就比較有意思了，因為用 export.char 會輸出一個物件，所以可以匯出多個資料

1
2
3
4
5
6
7
// data.js
exports.num = [1, 2, 3];
exports.char = ["A", "B", "C"];

// main.js
var NaNiKoLeh = require("./data.js");
console.log(NaNiKoLeh); // { num: [1, 2, 3 ], char: [ 'A', 'B', 'C' ]}