ES Module

隨著 Web 應用程式的複雜性提高

JavaScript 模組化開發已經成為必然的趨勢

先追溯過往的幾種 JS 引用方式

最傳統的 <script> 引入方式

全域作用域容易造成變數污染和衝突

文件只能依照 <script> 順序載入，不具彈性

在大型專案中各種資源和版本難以維護

必須由開發者自行判斷模組和函式庫之間的依賴關係

非同步載入模組的規範

基本格式：

 define(id?, dependencies?, factory);

 require(['esri/map'], function(Map) {
  var map = new Map('map', {
    center: [-118, 34.5],
    zoom: 8,
    basemap: "topo"
  });
});

 const http = require('http');

 const { src, dest, parallel } = require('gulp');

CommonJS 導出模組範例

 module.exports = (a, b) => { console.log(a + b); };

ECMAScript 6 的標準中定義了 JavaScript 的模組化方式

讓 JavaScript 在開發大型複雜應用程式時上更為方便且易於管理

亦可以取代過去 AMD、CommonJS 等規範

成為通用於瀏覽器端和伺服器端的模組化解決方案

 // add.js
const add = (a, b) => a + b;
 
export default add;

 // index.js
import add from "./add";
 
console.log(add(5, 8)); // 13

 // add.js
export const add = (a, b) => a + b;

 // index.js
import { add } from "./add";
 
console.log(add(5, 8)); // 13

但目前瀏覽器和 Node 在 ES6 模組支援度還不完整

大部分情況需要透過 Babel 轉譯器進行轉譯

或是用 webpack 來打包

小小的理解 ES Module 後

就能來講 webpack 了

下一章： webpack

	require(['esri/map'], function(Map) {
	var map = new Map('map', {
	center: [-118, 34.5],
	zoom: 8,
	basemap: "topo"
	});
	});