module的前生今世

[MJingv]

https://www.ruanyifeng.com/blog/2020/08/how-nodejs-use-es6-module.html

AMD - 异步（浏览器）

    define(id?, dependencies?, factory);

CJS - 同步（服务器）

module.exports = xx;

const a = require('./a');

rules

• 所有代码都运行在模块作用域，不会污染全局作用域。
• 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
• 模块加载的顺序，按照其在代码中出现的顺序。
• CommonJS模块的加载机制是，输入的是被输出的值的拷贝
• CommonJS 模块就是对象，输入时必须查找对象属性

require

• 读入并执行一个JavaScript文件，然后返回该模块的exports对象。如果没有发现指定模块，会报错
• 如果模块输出的是一个函数，那就不能定义在exports对象上面，而要定义在module.exports变量上面。

ES6 Module

• ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量
• ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入
• 没法引用 ES6 模块本身，因为它不是对象

NPM

dependencies

These packages are required by your application in production.

npm install <package_name> --save

devDependencies

These packages are only needed for development and testing. npm install <package_name> --save-dev

Command Line Flags

Putting --foo bar on the command line sets the foo configuration parameter to "bar".

[MJingv]

Module 的加载实现

浏览器加载

• HTML 网页中，浏览器通过<script>标签加载 JavaScript 脚本

• defer是“渲染完再执行”，async是“下载完就执行”。defer按页面出现的顺序加载，async脚本是不能保证加载顺序的。

• module加载

<script type="module" src="./foo.js" defer></script>

ES6 模块与 CommonJS 模块的差异

• CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
• CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

Node 加载

• Node 要求 ES6 模块采用.mjs后缀文件名
• 如果模块名不含路径，那么import命令会去node_modules目录寻找这个模块
• Node 的import命令是异步加载，这一点与浏览器的处理方法相同

内部变量

• ES6 模块之中，顶层的this指向undefined；CommonJS 模块的顶层this指向当前模块

• 以下这些顶层变量在 ES6 模块之中都是不存在的

  arguments
  require
  module
  exports
  __filename
  __dirname

ES6 模块加载 CommonJS 模块