import 和 require 比较

遵循的规则

    require/exports是JavaScript社区中的开发者自己草拟的规则,遵循AMD,统治了所有ES6之前的所有模块化编程

    import/export则是名门正派,是ES6的一个语法标准。遵循CommonJs

    补充:webpack一开始的目的就是打包CommonJs模块(CommonJs是Node.js的规范)

                babel会把你编写的import/export最终编译成require/exports来执行

调用时间

    require是运行时调用,所以require理论上可以运用在代码的任何地方。在使用时,完全可以忽略模块化这个概念来使用require。仅仅把它当做一个node内置的全局函数,它的参数可以是表达式

    import是编译时调用,所以必须放在文件开头

本质:

    require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结构赋值给某个变量

    import是解析过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require

    ES6 Module(import/export)中倒入模块的属性或者方法是强绑定的,包括基础类型。而CommonJs(require/exports)则是普通的值传递(基础类型)或者引用传递(引用类型)

import 和 require 比较_第1张图片
网上例子

在编写上面的过程中发现,使用import方法调用,在node执行的过程中会报错。

import 和 require 比较_第2张图片

因为当前的node版本不支持import,所以还是需要先使用babel将import编译成require,所以这里就不好进行比较。

如果引用的是数组

import 和 require 比较_第3张图片
修改exprt中数组的值

看看下面的运行结果

那么,这里就对require得出一个结论:对基础类型是值拷贝、对引用类型的值是浅拷贝

default关键字:

    default 是ES6 Module 所独有的关键字,export default fs 输出默认的接口对象,import fs from 'fs' 可直接导入这个对象。说白了,它其实就是别名的语法糖(别名是通过 as 关键字来取的)

到底是使用require还是import?

    这个问题就目前而言,没有办法回答。以为目前所有的引擎都还没有实现import,import语法会被转码为require,这也是为什么在模块导出时使用module.exprts,在引入模块时使用import仍然起效。本质上来说,import会被转码为require去执行。但是从长远角度来看,还是使用import,在未来浏览器引擎支持import的时候,只需要做出很少的改动

参考地址:

地址一(推荐)、地址二


import 和 require 比较_第4张图片

你可能感兴趣的:(import 和 require 比较)