require和import的区别在哪

在vue+webpack的项目中,里面有使用require来引入文件,也有的用import来引入文件,两者之间是一样的吗?


两者的出身背景

ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。同时还有CMD规范,为同步加载方案如seaJS。


1. require/exports

CommonJS——听起来就很高大上的名字,就是它填补了JS没有模块的空能空缺,它的目标是让JS不止在浏览器中运行,可以在各个地方都能运行,或者说是提供一个类似Python,Ruby和Java标准库。

而NodeJS是以CommonJS规范实现,Webpack也是以CommonJS规范书写的

node.js的模块系统,就是参照CommonJS规范实现的。在CommonJS中,有一个全局性方法require(),用于加载模块。


CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}

2. import/export

ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。


ES6模块主要有两个功能:export和import

export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口

import用于在一个模块中加载另一个含有export接口的模块。

也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)

你可能感兴趣的:(webpack)