require和import差异

　　最近写vue过程中，发现前人的代码，有的引入模块是以require引入，有的是以import引入，到底两者有什么差异呢？

　　一、他们遵循的模块化规范不一样

　　　　所谓模块化，即为javascript提供的一个模块编写、模块依赖、模块运行的规范。

　　　　require/exports是一种野生规范。什么是野生规范？野生规范是在javascript社区的开发者自己定义的，并且得到很多人认可，但是还未正式的收入js规范中，但是收入到了CommonJS规范中。相比require的野生规范，import/export血统就纯正多了，他是在ES6中正式被提出。

　　二、出现的时间不一致

　　　　require/exports出现在2010年左右。此时不得不提webpack和nodeJS。webpack是对CommonJS模块进行打包，而nodeJS一直沿用CommonJS作为规范。直到2015年，出现ES6，然而ES6与CommonJS差异较大，nodeJS一直不兼容ES6，这里还特别应该感谢下Babel，他把所有还未被各宿主（各浏览器，nodeJS）接受的ES6 Module统统编译为ES5的CommonJS语法。所以import/export虽然存在，但是到最后还是被编译成require了。

　　三、使用方法不一致

　　　　require只有3种方式：　　　　

const fs = require('fs');
exports.fs=fs;
module.exports=fs

　　　　import方式就多种多样了：　　　　

import fs from 'fs'
import * from 'fs'
import {default as fs}from 'fs'
import {* as fs} from 'fs'
import {moduleName as fs} from 'fs'
import {moduleName} from 'fs'

export default fs
export const moduleName
export function moduleName
export {moduleName1,moduleName2}
export * from 'fs'

　　虽然说了这么多的差一点，但是他们本质上都是把输出的内容看成是一个对象，可以在其他地方直接引入。

　　tips：default是ES6的关键字，export default fs可以把fs作为默认的接口对象输出，import fs from 'fs'直接引入默认的fs对象

猜你喜欢