js模块化方案

目前主流的模块化方案是ESModule（es6提供的模块化方案）和CommonJS规范（node环境）
ESModule

// index.js
let w = 'w';
let logA = function() {
  console.log('logA');
}
export function logB() {
  console.log('logB');
}
export { w, logA  };

let a = 'default';
export default a;

引入

<script type="module">
  import { w, logA, logB } from "./index.js";
  console.log(w); // w
  logA(); // logA
  logB(); // logB
  
  import a from "./index.js";
  console.log(a); // default
</script>

CommonJS
CommonJS需要node环境
导出

// index.js
module.exports = {
    w: 'w'
};

引入

const w = require("./index.js");
console.log(w);

在ESModule出来之前，用的是AMD，CMD，UMD，AMD依赖于RequireJS ，CMD依赖于SeaJS，UMD是兼容AMD、CMD、CommonJS 的规范。
导出

// app.js
;(function(root, factory) {
  if (typeof module !== 'undefined' && typeof exports === 'object') {
    // CommonJS
    module.exports = factory;
  } else if (typeof define === 'function' && (define.amd | define.cmd)) {
    // AMD | CMD
    define(function(require, exports, module) {
      module.exports = factory;
    })
  } else {
  	// 都不是 挂载到全局
    root.logA = factory;
  }
})(
  this || (typeof window !== 'undefined' ? window : global),
  function() {
    console.log("logAAA");
  }
);

引入

// AMD 依赖于 requirejs
// 使用npm i requirejs 下载
    <script src="require.js"></script>
    <script>
		require(["app.js"], function(logA) {
       		logA(); // logAAA
      	});
	</script>
// CMD 依赖于 sea.js
// npm i sea.js 下载
    <script src="sea.js"></script>
    <script>
		seajs.use(["app.js"], function(logA) {
        	logA(); // logAAA
      	});
	</script>
// 原始的引入方式
    <script src="app.js"></script>
    <script>
		logA(); // logAAA
	</script>