经过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的区别是什么？看这个你就懂了

 

注1：

JS报错：Cannot use import statement outside a module

在使用import和export的时候，type类型错误会致使没法使用模块化功能：

<script type="text/javascript">
　　import test from './test/js';
　　console.log(test);
</script>

 

须要将type中text/javascript改成module，模块化的功能方能生效：

<script type="module"> import test from './test.js'; console.log(test); </script>

 

注2：

JS报错：require is not defined

报错缘由：
浏览器端不能识别require关键字，require是node.js环境下的，在node_modules文件夹里面的模块下面常见require

解决方法：
经过工具browserify或者是webpack把js文件编译一下，转成浏览器端可识别的。

//安装browserify ,我这里是全局安装

npm install -g browserify

// 编译

browserify ./source/module.js -o ./dist/dist.js

便可在dist目录下看到打包后的dist.js文件。 
browserify 后面的第一个参数表示要打包的前端程序的入口，-o或者>表示打包后的输出文件。browserify会根据入口文件中的require或者import(ES6,须要安装babel)自动完成依赖分析，并将依赖文件打包为一个单文件。
————————————————
版权声明：本文为CSDN博主「giao00000」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处连接及本声明。
原文连接：https://blog.csdn.net/wml00000/article/details/84181227

 

原文出处：

西风瘦码,ES6学习笔记（二）—— 经过ES6 Module看import和require区别,http://www.javashuo.com/article/p-ckzwyfvj-dm.html