两种混用的话总是看着代码有些混乱；
正常情况下，一个项目中最好是对引入方式做一个规范；
以下对比记录一下。
require
-
规范：
Commonjs规范 -
模块输出：一个值的拷贝
-
加载时间：代码运行时加载
// 这意味着在require完成之前是不能访问到被导入的方法和变量
例如：
a()
let { a } = require("./module.js");
以上会报错
- 导出方式：
// test.js
function test () {
console.log('test');
}
module.exports = {
test
};
- 引入方式：
第一种
let { test } = require('./test.js'); //引入
test() //执行
第二种
let testJs = require('./test.js'); //引入
testJs.test(); //执行
import
-
规范：
ES6 module规范 -
模块输出：一个值的引用
-
加载时间：代码编译时加载
// 会存在变量提升，即在import之前可执行
例如：
a()
import { a } from "module";
以上可执行
- 导出方式：
// 常量导出
export const name = "test name";
//函数导出
export function test () {
console.log('test');
}
// 默认导出模块，一个文件中只能定义一个
export default function() {...};
- 引入方式
// _代表引入的export default的内容
import _, { test,name } from './test.js';
console.log('name'); //执行
test(); //执行
重点
1、CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
2、CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。
而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
结论摘自阮一峰大神，ES6 模块与 CommonJS 模块的差异。
