关于ES6中的模块化的规范：export与import

• 2019 年 11 月 13 日
• 筆記

前言

其实对我个人来说，开始的时候对于export 与 import 用法挺模糊的。到现在为止也终于清楚一点了。

有一些前提我们需要了解清楚：

1、JS以前是没有模块化这个概念的，没有的后果就是代码显得较乱。后来社区出现了两种规范：CommonJS、AMD

2、对于我来说，问题出现就出现在这两个规范上，由于没有系统的学习，一会import 一会export 、一会require()

清楚了有两个规范后（CommonJS、AMD），就要知道下面的事情：

1、CommonJS 是同步代码规范，Node.js的模块系统，就是参照CommonJS规范实现的。还有NPM也是遵循commonJS定义的包规范。

2、AMD意思是"异步模块定义"，是前端模块规范。RequireJS就是实现了AMD规范的。

把上面我写到的理解，对于我来说大致就能理解清楚了，下面就说一下相应的语法（主要CommonJS语法）

具体语法

CommonJS模块规范

1、模块引用

var math = require('math')

在CommonJS 规范中，通过require()方法，引入一个模块的API。

2、模块定义

// math.js  exports.add = function() {      var sum=0,          i = 0,          args = arguments,          l = args.length;      .....  }

CommonJS通过require引入模块，那么通过什么定义呢？ 通过：exports，上下文提供了exports对象用于导出当前模块的方法或变量，并且它是唯一的导出的接口。在模块中，还存在一个module对象，它代表模块本身，而exports是module的属性。 在Node中，一个文件就是一个模块。

export 和 import

export

export就是向外导出一些东西，那么这些东西有哪些呢？其实用一句前辈的话来说，你能想到的基本都能导出。

比如有：变量、常量、函数、类等等。

export let a  = xxx;    export const a  = xxx;    export {xx, xx, xx, xxxx}; // xx xxx 是已经定义好了的东西    export function sum(a, b) {    }    export class Person {    }

有一个特殊的是默认导出

也即：

export default 'aaa';

什么意思，这需要和下面的import连着。

import

import 就是导入，和export对应。

import * as mode from "./xxx";    import {aa,vv,cc, ...} from "./xxx";

以上第一条就是导入所有，并重命名为mode 第二条导入aa,vv,cc

还有就是导入默认导出的！

import xxx from "./yyyy"; // 引入默认成员 即前文的export default

这就是和前文默认导出配合使用的：export default 'aaa';

还有就是以下的：

// 模块的代码引进来，不引入内部成员  import "./1.jpg"; // 通常需要使用webpack配合某个loader    // 异步引入  let promise = import("./mode"); // 返回的是promise，异步加载需要绝对路径