Bootstrap

require和import的区别

​​

require和import的区别

require和import的区别 - wenxuehai - 博客园

目录


1、require 和 import 的区别

node编程中最重要的思想就是模块化,import 和 require 都是被模块化所使用。在 ES6 当中,用 export 导出接口,用 import 引入模块。但是在 node 模块中,使用module.exports导出接口,使用 require 引入模块。

两者的区别如下:

遵循规范:

  • require 是 AMD 规范引入方式
  • import是 ES6 的一个语法标准,如果要兼容浏览器的话必须转化成 ES5 的语法

调用时间:

  • require是运行时调用,所以require理论上可以运用在代码的任何地方
  • import是编译时调用,所以必须放在文件开头

本质:

  • require 是赋值过程。module.exports后面的内容是什么,require的结果就是什么,比如对象、数字、字符串、函数等,然后再把require的结果赋值给某个变量,它相当于module.exports的传送门
  • import 是解构过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require

import 虽然是 es6 中的语法,但就目前来说,所有的引擎都还没有实现import。

我们在 node 中使用 babel 支持ES6(在 node 当中,比如 node.js 代码,也不能直接使用 import 来导入,必须使用 babel 支持才能使用 import 语法),实际上也是将 ES6 转码为 ES5 再执行,import 语法实际上会被转码为 require。这也是为什么在模块导出时使 module.exports,在引入模块时使用 import 仍然起效,因为本质上,import 会被转码为 require 去执行。

2、require() | exports 的用法

通过require引入基础数据类型时,属于复制该变量。通过require引入复杂数据类型时,属于浅拷贝该对象。

2.1、导入模块 require() 的用法

require() 函数用于在当前模块中加载别的模块。在函数内写入模块的路径即可(相对路径和绝对路径都行)

 
  1. var foo1 = require('./foo'); // .js 扩展名可忽略
  2. var foo2 = require('./foo.js');
  3. var data = require('./data.json'); //不仅仅是 JS 文件,也可以是其他文件

require 相当于module.exports的传送门,module.exports 后面的内容是什么,require 的结果就是什么,比如对象、数字、字符串、函数等,然后再把 require 的结果赋值给某个变量。

require理论上可以运用在代码的任何地方,甚至不需要赋值给某个变量之后再使用,比如:

 
  1. require('./a')(); //假设a模块是一个函数,此时将立即执行a模块函数
  2. var data = require('./a').data; //假设a模块导出的是一个对象
  3. var a = require('./a')[0]; //假设a模块导出的是一个数组

2.2、输出接口 exports 的用法

exports 对象是当前模块的导出对象,用于导出该模块的方法或属性。别的模块通过 require() 函数引用别的模块时实际上得到的就是别的模块的 exports 对象:

 
  1. exports.hello = function () {
  2. console.log('Hello World!');
  3. };

上面代码实际上就是导出了一个对象,通过该对象的 hello 属性可以拿到该方法:

 
  1. var obj = require('./index2.js')
  2. obj.hello(); //输出 Hello Word!

导出模块的方法或者属性可以直接用 exports,也可以使用 module.exports 来进行导出。通过module对象可以访问到当前模块的一些相关信息,但最多的用途是替换当前模块的导出对象。

 
  1. module.exports = function () {
  2. console.log('Hello World!');
  3. };

实际上,exports是module.exports的一个引用,module.exports 指向的就是 exports。

 
  1. console.log(exports === module.exports); //输出true

3、import | export 的用法

 import 是编译时运行的(require是运行时的),它必须放在文件开头,而且使用格式也是确定的,不容置疑。它不会将整个模块运行后赋值给某个变量,而是只选择import的接口进行编译,这样在性能上比require好很多。

import | export 遵循 ES6 规范,支持编译时静态分析,便于JS引入宏和类型检验。动态绑定。写法比较多:

 
  1. import fs from 'fs'
  2. import {default as fs} from 'fs'
  3. import * as fs from 'fs'
  4. import {readFile} from 'fs'
  5. import {readFile as read} from 'fs'
  6. import fs, {readFile} from 'fs'
  7. export default fs
  8. export const fs
  9. export function readFile
  10. export {readFile, read}
  11. export * from 'fs'

具体可参考:ES6中的export和import - wenxuehai - 博客园

;