两种模块化规范

77 阅读2分钟

commonjs规范 webpack配置走的就是commonJS规范(node)在浏览器里边没办法运行依赖于node环境(node就是一个JS在服务器上的运行环境) require module.exports

WechatIMG300.png

WechatIMG299.png cd到文件下可以看到控制台的输出: WechatIMG303.png

WechatIMG301.png

esmodule 业务代码 JavaScript没有模块化一直是它的痛点,所以才会产生我们前面学习的社区规范:CommonJS、AMD、CMD等,所以在ES推出自己的模块化系统时,大家也是兴奋异常。

ES Module和CommonJS的模块化有一些不同之处:

  • 一方面它使用了import和export关键字;
  • 另一方面它采用编译期的静态分析,并且也加入了动态引用的方式;

ES Module模块采用exportimport关键字来实现模块化:

  • export负责将模块内的内容导出;
  • import负责从其他模块导入内容;

注意:Module模块采用export和import关键字来实现模块化:

export导出和import导入的方式

1.export导出的几种方式

  • 1.变量在声明时直接导出,即export后跟变量声明语句
  • 2.变量声明后,统一导出
  • 3.统一导出时给导出的变量起别名

1.变量在声明时直接导出,即export后跟变量声明语句

WechatIMG305.png

2.变量声明后,统一导出

WechatIMG306.png

3.统一导出时给导出的变量起别名

WechatIMG307.png 导入时要导入变量起的别名

WeChat886cc0c54d2badc723a79557399a806b.png

4.export default 默认导出
还有一种导出叫做默认导出(default export)

  • 默认导出export时可以不需要指定名字;
  • 在导入时不需要使用 {},并且可以自己来指定名字;
  • 它也方便我们和现有的CommonJS等规范相互操作;
  • 默认导出只能有一个

WechatIMG310.png

导入时直接导入即可 WechatIMG311.png

2.import导入的几种方式:

  • 1,具名导入 import { LName, LAge, LSum, LPerson } from "./a.js";
  • 2,导入时变量起别名 import {name as LName} from "./a.js";
  • 3,整体导入 import * as ll from "./a.js"
  • 4,导入模块默认导入的变量

WechatIMG313.png

3.导出和导入结合使用:

WechatIMG312.png