upd(modules/index): 📝添加关于esm的理解

dist/bundle.js

@@ -1,12 +1,14 @@
-
-      ;(function(entry, chunk) {
-        function require(moduleOriginPath) {
-          var exports = {}
-          ;(function() {
-            eval(chunk[moduleOriginPath])
-          })()
-          return exports
-        }
-        require(entry)
-      })("./modules/index.js", {"./modules/index.js":"\"use strict\";\n\nvar _a = require(\"./a.js\");\n\n// const c = require('./c')\n// import d from './d.js';\n// const b = require('./b')\nconsole.log(\"Hello \".concat(_a.a));","./a.js":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.a = void 0;\n\n/**\n * this is a es6 module\n */\nvar a = 'World';\nexports.a = a;"})
-
+;
+(function (entry, chunk) {
+  function require(moduleOriginPath) {
+    var exports = {};
+    (function () {
+      eval(chunk[moduleOriginPath])
+    })()
+    return exports
+  }
+  require(entry)
+})("./modules/index.js", {
+  "./modules/index.js": "\"use strict\";\n\nvar _a = require(\"./a.js\");\n\n// const c = require('./c')\n// import d from './d.js';\n// const b = require('./b')\nconsole.log(\"Hello \".concat(_a.a));",
+  "./a.js": "\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.a = void 0;\n\n/**\n * this is a es6 module\n */\nvar a = 'World';\nexports.a = a;"
+})

modules/index.js

@@ -1,3 +1,20 @@
+/**
+ * @add es6 module notes
+ * 写esm的import时猜了一下坑：
+ * - 错误写法：import a from './a.js';
+ * - 正确写法：import {a} from './a.js';
+ * 看了一下./bundle.js文件打包产物源码，一下子恍然大悟，原来export会导出一个export对象，这个对象为 
+ * {
+ *    __esModule: true, // 表明这是个es6 module
+ *    key: value, // 我们导出的键值对key-value
+ * }
+ * 所以这下明白了为什么是`{a}`而不是`a`了
+ * 
+ * 此外，顺便回顾下export的几种写法
+ * 1. export const a = 'World'
+ * 2. const a = 'World'; export { a }
+ * 3. const a = 'World'; export { a as myA, a as hisA } // 只要导出变量名不重复，则可以多次导出
+ */
 import {a} from './a.js';
 // const c = require('./c')
 // import d from './d.js';