# import require
觀念網站
https://hacks.mozilla.org/2015/08/es6-in-depth-modules/

大概流程圖

備忘錄
https://www.samanthaming.com/tidbits/79-module-cheatsheet/

## 簡單介紹

nood.js很常用這個
模組化概念

**一開始使用**
**CommonJs 和 require**
後來

**ES6**
使用
**ESM 和 import **
但記得這要babel把它編譯回去，不然有些瀏覽器不支援

## 注意事項
script要寫type="module"
才能匯入匯出

ex
`<script type="module">
</script>`

## 匯出 匯入

### 預設匯出
**常見匯出方式，用於匯出物件，在Vue裡面匯出元件**
export defalu {
data:[],
init(),
}
### 預設匯入
預設匯出沒有名字，所以可以幫他命名
import a from './c.js'

### 具名匯出
可用於匯出以定義的變數、物件、涵式、專案開發中常用於"方法匯出"
第三方框架、涵式、套件、很常用到具名定義"方法"
export任何頂層function(可以放參數)，class，var，let，或const。

// kittydar.js - Find the locations of all the cats in an image.
// (Heather Arthur wrote this library for real)
// (but she didn't use modules, because it was 2013)

export function detectCats(canvas, options) {
  var kittydar = new Kittydar(options);
  return kittydar.detectCats(canvas);
}

export class Kittydar {
  ... several methods doing image processing ...
}

// This helper function isn't exported.
function resizeCanvas() {
  ...
}
...

### 具名匯入
用單一匯入 不要用全部匯入
可用於

**單一匯入**
import {} from './c.js'

**全部匯入**
import * as all from './c.js'

### SideEffect匯入
import './asdasd.js'

老舊套件會用到
ex JQery

## 重命名導入和導出

import {flip as flipOmelet} from "eggs.js";

## 基本觀念
基本概念
require用於讀取並執行js文件， 並返回該模塊的exports對象， 若無指定模塊， 會報錯 所以要.default。

如果一个模块中仅仅export default， 那么就不用加.default了。如果除此之外还有别的对象被 export 出来，那不好意思，只能老老实实写default 了。

Node使用CommonJS模塊規範， CommonJS規範加載模塊是同步的， 只有加載完成， 才能執行後續操作。

import用於引入外部模塊， 其他腳本等的函數， 對象或者基本類型。
import屬於ES6的命令， 它和require不一樣， 它會生成外部模塊的引用而不是加載模塊， 等到真正使用到該模塊的時候才會去加載模塊中的值。

## 比較
import静态编译，import的地址不能通过计算

require就可以，例如 const url = "a" + "b";

Import url 直接报错了

require(url)不会报错

所以require都会用在动态加载的时候

## require

require： 函數，用於導入模塊

module.exports： 變量，用於導出模塊

## import

import: 導入

export： 導出

### 介紹

ES6 模塊是一個包含 JS 代碼的文件。沒有特殊的module關鍵字；一個模塊通常讀起來就像一個腳本。有兩個區別。

ES6 模塊自動是嚴格模式代碼，即使您沒有"use strict";在其中編寫代碼。

您可以在模塊中使用import和export。

讓我們export先談談。默認情況下，模塊內聲明的所有內容都是模塊本地的。如果您希望模塊中聲明的某些內容是公共的，以便其他模塊可以使用它，則必須導出該功能。有幾種方法可以做到這一點。最簡單的方法是添加export關鍵字。

// kittydar.js - Find the locations of all the cats in an image.
// (Heather Arthur wrote this library for real)
// (but she didn't use modules, because it was 2013)

export function detectCats(canvas, options) {
  var kittydar = new Kittydar(options);
  return kittydar.detectCats(canvas);
}

export class Kittydar {
  ... several methods doing image processing ...
}

// This helper function isn't exported.
function resizeCanvas() {
  ...
}
...

你可以export任何頂層function，class，var，let，或const。

這就是編寫模塊所需要知道的全部內容！您不必將所有內容都放在IIFE或回調中。繼續並聲明您需要的一切。由於代碼是一個模塊，而不是一個腳本，所有的聲明都將作用於該模塊，而不是在所有腳本和模塊中全局可見。導出構成模塊公共 API 的聲明，就大功告成了。

除了導出，模塊中的代碼幾乎就是普通代碼。它可以使用像Object和這樣的全局變量Array。如果您的模塊在 Web 瀏覽器中運行，則它可以使用document和XMLHttpRequest。

在一個單獨的文件中，我們可以導入和使用該detectCats()函數：

// demo.js - Kittydar demo program

import {detectCats} from "kittydar.js";

function go() {
    var canvas = document.getElementById("catpix");
    var cats = detectCats(canvas);
    drawRectangles(canvas, cats);
}

要從一個模塊導入多個名稱，您可以編寫：

import {detectCats, Kittydar} from "kittydar.js";

當您運行包含import聲明的模塊時，首先加載它導入的模塊，然後在依賴圖的深度優先遍歷中執行每個模塊主體，通過跳過任何已執行的內容來避免循環。

這些是模塊的基礎知識。這真的很簡單。;-)

### 導出列表

export {detectCats, Kittydar};

// no `export` keyword required here
function detectCats(canvas, options) { ... }
class Kittydar { ... }

一個export列表不必是文件中的第一件事; 它可以出現在模塊文件的頂級範圍內的任何地方。您可以擁有多個export列表，或將export列表與其他export聲明混合使用，只要沒有名稱被多次導出即可。

### 重命名導入和導出

偶爾，導入的名稱會與您也需要使用的其他名稱發生衝突。所以 ES6 允許你在導入時重命名它們：

// suburbia.js

// Both these modules export something named `flip`.
// To import them both, we must rename at least one.
import {flip as flipOmelet} from "eggs.js";
import {flip as flipHouse} from "real-estate.js";
...

同樣，您可以在導出時重命名內容。如果您想以兩個不同的名稱導出相同的值，這很方便，這種情況偶爾會發生：

// unlicensed_nuclear_accelerator.js - media streaming without drm
// (not a real library, but maybe it should be)

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

### 默認導出
新標準旨在與現有的 CommonJS 和 AMD 模塊進行互操作。所以假設你有一個 Node 項目並且你已經完成了npm install lodash. 你的 ES6 代碼可以從 Lodash 導入單個函數：

import {each, map} from "lodash";

each([3, 2, 1], x => console.log(x));

###### tags: `javaScript`