文章目录

  • 一、CommonJS 模块化规范
  • 二、ES6 模块化规范
  • 1、导出导入
  • (1)依次导出导入
  • (2)一次导出导入
  • 2、转码

一、CommonJS 模块化规范

每个文件就是一个模块。CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。

导出:module.exports

导入:require

【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_javascript


【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_ecmascript6_02

附加:一篇前辈的文章

【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_前端_03

二、ES6 模块化规范

ES6使用 export 和 import 来导出、导入模块。

导出:export,export default
导入:import

1、导出导入

(1)依次导出导入

导出

【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_模块化_04


导入

【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_ecmascript6_05

(2)一次导出导入

导出

【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_javascript_06


导入

【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_模块化_07


2、转码

报错,因为默认是不支持 ES6 语法的

【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_前端_08


需要用 Babel 来处理,使语法从 ES6 转换为 ES5

因此执行以下步骤:

1、初始化为 Node.js 项目

【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_javascript_09


2、配置 .babelrc 文件

【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_javascript_10

{
"presets": ["es2015"],
"plugins": []
}

3、安装转码器(作为 ES6 新语法到 ES5 语法的映射表),在项目中安装

cnpm install --save-dev babel-preset-es2015

【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_模块化_11


4、自定义脚本,修改 package.json 文件中的 scripts 标签

【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_前端_12


5、执行上述自定义的 build

【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_ecmascript6_13


【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_npm_14


6、执行转码后的 js 文件

【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_前端_15