ES Module - HackMD

--- title: 'ES Module' --- ## ES Module --- 隨著 Web 應用程式的複雜性提高 JavaScript 模組化開發已經成為必然的趨勢 --- 先追溯過往的幾種 JS 引用方式 --- ### CDN-Based 最傳統的 ```<script>``` 引入方式全域作用域容易造成變數污染和衝突 文件只能依照 ```<script>``` 順序載入，不具彈性 在大型專案中各種資源和版本難以維護 必須由開發者自行判斷模組和函式庫之間的依賴關係 --- ### AMD 非同步載入模組的規範基本格式： ```javascript= define(id?, dependencies?, factory); ``` ```javascript= require(['esri/map'], function(Map) { var map = new Map('map', { center: [-118, 34.5], zoom: 8, basemap: "topo" }); }); ``` --- ### CommonJS ```javascript= const http = require('http'); ``` ```javascript= const { src, dest, parallel } = require('gulp'); ``` CommonJS 導出模組範例 ```javascript= module.exports = (a, b) => { console.log(a + b); }; ``` --- ECMAScript 6 的標準中定義了 JavaScript 的模組化方式讓 JavaScript 在開發大型複雜應用程式時上更為方便且易於管理亦可以取代過去 AMD、CommonJS 等規範 成為通用於瀏覽器端和伺服器端的模組化解決方案 --- ### ES Module ```javascript= // add.js const add = (a, b) => a + b; export default add; ``` ```javascript= // index.js import add from "./add"; console.log(add(5, 8)); // 13 ``` ```javascript= // add.js export const add = (a, b) => a + b; ``` ```javascript= // index.js import { add } from "./add"; console.log(add(5, 8)); // 13 ``` --- 但目前瀏覽器和 Node 在 ES6 模組支援度還不完整大部分情況需要透過 Babel 轉譯器進行轉譯或是用 webpack 來打包 --- 小小的理解 ES Module 後就能來講 webpack 了 --- ###### tags: `前端` 下一章： [webpack](https://hackmd.io/p/SJIOgEg64#/)