javasript require与import详解
前言
在javascript中，导入模块可使用require或者import，但两者之间有什么区别呢？
产生背景
要弄清两者之间的区别，首先需要弄明白两者是如何产生的，同样是导入模块，为何要定义两个关键字？
下面这张图可以很好的说明require与import之间的关联
require与module.exports是一对，它们是CommonJS中定义的关键字；import与export是一对，它们是ES6定义的标准；它们产生的原因都是为了让javascript项目可以模块化，使js不只是能在浏览器端编写一些简单的脚本，还可以运用js编写更加庞大的项目。
下面有对模块化更加详细的解释：
什么是模块化？
模块化就是将变量和函数 放入不同的文件中
模块的作用域是私有的 内部定义的代码只能在当前文件中使用 外部使用那么需要将此模块暴露出去
模块化的好处：
减少全局变量
避免变量名和函数命名冲突
提高代码的复用性和维护性
到这里，可能又会有小伙伴产生疑问了，CommonJS与ES6又有什么区别与联系？
-
CommonJS是由JavaScript社区创造并维护的，CommonJS代码并不能直接在浏览器运行，需要通过第三方库进行转义才行
CommonJS产生的原因 JavaScript是一个强大面向对象语言，它有很多快速高效的解释器。官方JavaScript标准定义的API是为了构建基于浏览器的应用程序。然而，并没有定于一个用于更广泛的应用程序的标准库。CommonJS API定义很多普通应用程序（主要指非浏览器的应用）使用的API，从而填补了这个空白。它的终极目标是提供一个类似Python，Ruby和Java标准库。这样的话，开发者可以使用CommonJS API编写应用程序，然后这些应用可以运行在不同的JavaScript解释器和不同的主机环境中。在兼容CommonJS的系统中，你可以实用JavaScript程序开发：服务器端JavaScript应用程序命令行工具、图形界面应用程序、混合应用程序（如，Titanium或Adobe AIR） -
ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了，ES6代码可以直接在现代浏览器上运行
ECMAScript和JavaScript到底是什么关系？简单来说，ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。 1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。 ES6的目标，是使得JavaScript语言可以用来编写大型的复杂的应用程序，成为企业级开发语言。
CommonJS很早就产生了，nodejs就是基于CommonJS进行开发的（为什么不使用ES6？因为ES6还没发布），因此在使用nodejs编写代码时，使用的是require与module.exports，对于两者，有一句比较有趣的外文解释：
I will make it simple,
Import and Export are ES6 features(Next gen JS).
Require is old school method of importing code from other files
代码中的表现
在vue项目中，使用require与import都可以导入模块，那么它们之间的差异是什么呢？
-
require一定要配合module.exports使用，import则需要和export配合使用，它们之间不能交叉，否则将会报错
// a.js const a = 100; module.exports = { a }; // b.js const { a } = require('./b'); console.log(a); // 输出100// a.js const a = 100; export default a; // b.js import a from './a'; console.log(a); // 输出100
-
require只会在第一次加载时运行，之后加载都是直接获取缓存（导出对象）
// a.js console.log("a"); // b.js require("./a.js"); // c.js require("./a.js"); require("./b.js"); // 输出： a虽然导入了两次 a.js，结果只有打印了一次a
-
require的导出不是动态绑定的
// a.js let counter = 0; function incCounter() { counter++; } module.exports = { counter, incCounter }; // b.js const { counter, incCounter } = require("./a.js"); console.log(counter); incCounter(); console.log(counter); // 输出：0 0打印结果均为 0
-
import用于异步加载，返回一个 Promise 对象，只会在第一次加载时运行
// a.mjs console.log("a"); // b.mjs import "./a.mjs"; // c.mjs import "./a.mjs"; import "./b.mjs"; // 输出：a虽然导入了两次 a.mjs，但是只打印了一次 a
-
import的数据是动态绑定的
// a.mjs let counter = 0; function incCounter() { counter++; } export { counter, incCounter }; // b.mjs import { counter, incCounter } from "./a.mjs"; console.log(counter); incCounter(); console.log(counter); //输出：0 1a.js中的变量变化同步映射到了b.js
总结
import与require在第一次导入模块时都会执行模块代码，多次导入不会重复执行，两者的区别在于require会缓存首次的结果，import导出的是一个Promise
在vue开发中建议使用import与export，毕竟require算是较为过时了，node在未来的规划中，也计划推出对ES6语法的支持，import与export才是未来
