模块化

概括

E6 与 commonJs 模块化区别

• es6 除了 default 导出 或者 * as 改名 的都必须 用 { } 按需导入。
• commonJs  是导出一个对象 用一个变量接收。变量名随便命名
  • 导入导出 都有等号
  • const bzj = require(‘nockJs’),按需引入
  • 导出 module.exports = 对象     等同于   module = 对象
  • 并且 module.exports 会覆盖 所有的 exports.key = value 个别导出

安装 node 后   自动生成的node_modules文件就是存的各种文件依赖。以及各种文件的导出（export default …）

---

介绍

早期 ES5 实现

• 真实开发，由于 js 文件很多，且全局变量多容易重名，污染其他文件
• 只有过分依赖 script 标签引入 js 的顺序
• 但还是解决不了根本问题
• 所有使用自执行函数(function(){})(),实现闭包，规范其作用域.但属性无法互用。
• 所有用一个变量把自执行函数暴露，出来。其他 js 只有通过暴露的变量名才可访问该模板的属性即方法

---

commonJS 规范实现(node就是这种规范导出导入的)

但需要 node 环境

---

ES6 实现(常用)

》》导出

• 
• export default { vue 组件实例\各种配置 }
  • vue 脚手架   视图组件多用与此种导出方式

直接使用 import 导出

http://es6.ruanyifeng.com/#do…命令

import 语句会执行所加载的模块，因此可以有下面的写法。

import ‘lodash’;

上面代码仅仅执行 lodash 模块，但是不输入任何值。

JS module 导入与导出（commonJS、ES6）混合使用。

注意： import命令加载 commonJS 模块，只能整体加载，不能只加载单一的输出项

https://www.jianshu.com/p/d959c08da88e

ES6 规范导出

common.JS 导入

要在 api 中拿到 request 对象

要 api.default.request

---

非框架导入

<script src="./js名.js" type="module"></script>
<script>
  import {A,B} from './js名.js';  -- 路径必须 ./
</script>

• import {name,age,height} from ‘./xx.js’ <个别导入>
• import * as  别名 from ‘./xx.js’ <全部导入>
• import  自命名 from ‘xx.js’  <export default 的导入>

---