ES6学习笔记（二）—— 经过ES6 Module看import和require区别

前言

说到import和require，你们平时开发中必定很多见，尤为是须要前端工程化的项目如今都已经离不开node了，在node环境下这二者都是大量存在的，大致上来讲他们都是为了实现JS代码的模块化，那为何会出现两种方案呢，又有什么不一样呢？

模块化的不一样解决方案

追根溯源，JS这门脚本语言设计伊始就是没有模块化的，因此早期的全局变量容易形成命名冲突。但随着web项目愈来愈大，JS的代码量也与日俱增，因而社区就自发约定了几种模块化的方案：requirejs遵循AMD，seajs遵循CMD，node的module遵循CommonJS规范，虽然写法上有所不一样，都是为了可以间接实现模块化的基础上保持较为一致的代码风格。

随着ES2015的发布，官方标准定义了一种模块化的方案，那就是import、export。但是，标准毕竟是标准，各大浏览器和node终端要实现标准仍是有一段距离的，目前来讲都2018年了主流浏览器都还没实现，还得依赖转换工具（例如babel）转为ES5的代码以后浏览器才能解析。因此这也就解释了为何咱们的工程化代码中nodeJS遵循的CommonJS规范和ES6的模块化方案并存的现象。

二者的区别

• import是ES6标准中的模块化解决方案，require是node中遵循CommonJS规范的模块化解决方案
• 后者支持动态引入，也就是require(${path}/xx.js)，前者目前不支持，可是已有提案
• 前者是关键词，后者不是
• 前者是编译时加载，必须放在模块顶部，在性能上会比后者好一些，后者是运行时加载，理论上来讲放在哪里均可以
• 前者采用的是实时绑定方式，即导入和导出的值都指向同一个内存地址，因此导入值会随着导出值变化。然后者在导出时是指拷贝，就算导出的值变化了，导入的值也不会变化，若是想要更新值就要从新导入
• 前者会编译成require/exports来执行

用法上的区别

import导入模块

• 导入模块根据模块导出时的写法有不一样写法，具体能够参考这里，若是模块是普通导出：

  // test.js
    var firstName = 'Michael';
    var lastName = 'Jackson';
    var year = 1958;
    export {firstName, lastName, year};
    // demo.js
    import { firstName } from './test.js'
    console.log(firstName);  // 'Michael'
    import * as test from './test.js'
    console.log(test);  //Module{}   全部内容
    import { firstName as key, lastName as value } from './test.js'
    console.log(key + '--' + value);  // Michael--Jackson

• 带有默认值时，也是咱们平常开发中经常使用的方式:

  // test.js
    var firstName = 'Michael';
    var lastName = 'Jackson';
    var year = 1958;
    export default { firstName, lastName, year };
    // demo.js
    import test from './test.js'
    console.log(test); // {firstName: "Michael", lastName: "Jackson", year: 1958}

  实际上这个default就是一个语法糖，只不过defaul是一个关键字，在这里等同于

  import { default as test } from './test.js'

• 特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量创建一一对应关系。能够理解为export导出的是一种引用关系而不是一个具体的值，它们的实质是，在接口名与模块内部变量之间，创建了一一对应的关系，例以下面这样就会报错：

  export 1;
  var m = 1;
  export m;

  可是改成用花括号包起来变成对象以后就成了输出引用关系就能够正常导出了：

  var m = 1;
  export { m }

  require导入模块

• require导入模块就没那么复杂了，导出时是什么样，导入时就仍是什么样：

// test.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
module.exports = { firstName, lastName, year };
// demo.js
const test = require('./test.js');
console.log(test); // {firstName: "Michael", lastName: "Jackson", year: 1958}

• 还有一种不经常使用的用法，直接导出：

// test.js
var year = 1958;
exports.year = year;
// demo.js
const test = require('./test.js');
console.log(test);  // {year: 1958}

• 须要注意的是，module.exports导出以后，后面的代码就对导出的模块无效了，例如上例中

// test.js
module.exports = { firstName, lastName, year };
exports.name = '222';
// demo.js
const test = require('./test.js');
console.log(test);  // {firstName: "Michael", lastName: "Jackson", year: 1958}

• 特别说明一下，因为require是能够在任意地方引入的，因此，咱们在开发中用~引入图片的方式实际上等效于require:

<img src="~assets/img/icon/red_logo.png" class="logo" alt="">
//等效于
<img :src="require('assets/img/icon/red_logo.png')" class="logo" alt="">

总结

import和require就是两种不一样的JS模块化实现方式而已，因为以前npm生态的不少包都是基础CommonJS规范写的，因此至关一段时间以内必然是import和require这两种模块引入方式共存的。

整体来讲时代老是发展的，ES6做为语言规范是早晚会被各大主流浏览器支持的，否则也就称不上主流浏览器了。因此为了长远考虑，咱们仍是尽可能使用ES6的import来引入模块，等之后浏览器支持了咱们也就能够少改一些代码了。

参考

• 阮一峰ES6-export命令
• Node中没搞明白require和import，你会被坑的很惨
• require 和 import 的区别？
• require和import的区别是什么？看这个你就懂了