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

前言:学习自:https://www.bilibili.com/video/BV1BU4y147pS?p=27

文章目录

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

一、CommonJS 模块化规范

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

导出:module.exports
导入:require
【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_第1张图片
【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_第2张图片

附加:一篇前辈的文章
【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_第3张图片

二、ES6 模块化规范

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

导出:export,export default
导入:import

1、导出导入

(1)依次导出导入

导出
【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_第4张图片
导入
【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_第5张图片

(2)一次导出导入

导出
【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_第6张图片
导入
【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_第7张图片


2、转码

报错,因为默认是不支持 ES6 语法的
【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_第8张图片
需要用 Babel 来处理,使语法从 ES6 转换为 ES5

因此执行以下步骤:

1、初始化为 Node.js 项目
【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_第9张图片
2、配置 .babelrc 文件
【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_第10张图片

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

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

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

在这里插入图片描述
4、自定义脚本,修改 package.json 文件中的 scripts 标签
【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_第11张图片
5、执行上述自定义的 build
【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_第12张图片
【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_第13张图片
6、执行转码后的 js 文件
【JavaScript 模块化编程】CommonJS 模块化规范,ES6 模块化规范 导出导入与转码_第14张图片

你可能感兴趣的:(大前端技术,JavaScript,javascript,npm,前端,ecmascript6)