Vue js 中 require和import有啥区别

2024-05-22 11:40:07 71

遵循的模块化规范不一样

**模块化规范：**即为JavaScript提供一种模块编写、模块依赖和模块运行的方案。谁让最初的JavaScript是那么的裸奔呢——全局变量就是它的模块化规范。

require/exports出生在野生规范当中，什么叫做野生规范？即这些规范是JavaScript社区中的开发者自己草拟的规则，得到了大家的承认或者广泛的应用。比如CommonJS、AMD、CMD等等。import/export则是名门正派。TC39制定的新的ECMAScript版本，即ES6（ES2015）中包含进来。

出现的时间不同

require/exports相关的规范由于野生性质，在2010年前后出生。AMD、CMD相对命比较短，到2014年基本上就摇摇欲坠了。一开始大家还比较喜欢在浏览器上采用这种异步小模块的加载方式，但并不是银弹。随着Node.js流行和Browsersify的兴起，运行时异步加载逐渐被构建时模块合并分块所替代。Wrapper函数再也不需要了。2014年Webpack还是新玩意，现在已经是前端必备神器了。

Browsersify、Webpack一开始的目的就是打包CommonJS模块。

CommonJS作为Node.js的规范，一直沿用至今。由于npm上CommonJS的类库众多，以及CommonJS和ES6之间的差异，Node.js无法直接兼容ES6。所以现阶段require/exports任然是必要且实必须的。出自ES6的import/export相对就晚了许多。被大家所熟知和使用也是2015年之后的事了。这其实要感谢babel（原来项目名叫做6to5，后更名为babel）这个神一般的项目。由于有了babel将还未被宿主环境（各浏览器、Node.js）直接支持的ES6Module编译为ES5的CommonJS——也就是require/exports这种写法——Webpack插上babel-loader这个翅膀才开始高飞，大家也才可以称"我在使用ES6！"

这也就是为什么前面说require/exports是必要且必须的。因为事实是，目前你编写的import/export最终都是编译为require/exports来执行的。

require/exports和import/export形式不一样

require/exports的用法只有以下三种简单的写法：

constfs=require('fs')
exports.fs=fs
module.exports=fs

而import/export的写法就多种多样：

importfsfrom'fs'
import{defaultasfs}from'fs'
import*asfsfrom'fs'
import{readFile}from'fs'
import{readFileasread}from'fs'
importfs,{readFile}from'fs'

exportdefaultfs
exportconstfs
exportfunctionreadFile
export{readFile,read}
export*from'fs'

require/exports和import/export本质上的差别

形式上看起来五花八门，但本质上：

CommonJS还是ES6Module输出都可以看成是一个具备多个属性或者方法的对象；
default是ES6Module所独有的关键字，exportdefaultfs输出默认的接口对象，importfsfrom'fs'可直接导入这个对象；
ES6Module中导入模块的属性或者方法是强绑定的，包括基础类型；而CommonJS则是普通的值传递或者引用传递。

1、2相对比较好理解，3需要看个例子：

//counter.js
exports.count=0
setTimeout(function(){
console.log('increasecountto',++exports.count,'incounter.jsafter500ms')
},500)

//commonjs.js
const{count}=require('./counter')
setTimeout(function(){
console.log('readcountafter1000msincommonjsis',count)
},1000)

//es6.js
import{count}from'./counter'
setTimeout(function(){
console.log('readcountafter1000msines6is',count)
},1000)

分别运行commonjs.js和es6.js：

➜testnodecommonjs.js
increasecountto1incounter.jsafter500ms
readcountafter1000msincommonjsis0
➜testbabel-nodees6.js
increasecountto1incounter.jsafter500ms
readcountafter1000msines6is1

原文链接：

Vue js 中 require和import有啥区别

遵循的模块化规范不一样

出现的时间不同

require/exports和import/export形式不一样

require/exports和import/export本质上的差别

热门推荐

随机推荐