require 与 import 两种引入模块方式到底有什么区别？_js中require 和其他方式引入区别

关于JavaScript 的模块化规范，可以移步至： 【JavaScript高级】模块化规范「一文让你彻底搞懂前端模块化规范 & 区别」

下面进入正题

require 与 import 两种引入模块方式，到底有什么区别呢？

大致可以分为以下几个方面：

一、写法上

• require/exports 的用法：

  const path = require('path')
  exports.path = path
  module.exports = path
  1
  2
  3

• import/export 的用法：

  import path from 'path'
  import {default as path} from 'path'
  import * as path from 'path'
  import { dirname } from 'path'
  import { dirname as dir } from 'path'
  import path, {dirname} from 'path'
  
  export default path
  export const path
  export function dirname
  export {dirname}
  export * from 'path'
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

二、执行顺序

• require：不具有提升效果，到底加载哪一个模块，只有运行时才知道。

  const path = './' + fileName;
  const myModual = require(path);
  1
  2

• import：具有提升效果，会提升到整个模块的头部，首先执行。

  // import 的执行早于foo的调用。本质就是 import 命令是编译阶段执行的，在代码运行之前。
  
  foo();
  
  import { foo } from 'my_module';
  1
  2
  3
  4
  5

三、输入值的区别

• require 输入的变量，基本类型数据是赋值，引用类型为浅拷贝，可修改。

• import 输入的变量都是只读的，如果输入 a 是一个对象，允许改写对象属性。

  // a.js
  let obj = {
    foo() {
      console.log('obj...foo');
    }
  }
  export {
    obj
  }
  
  // b.js
  import { obj } from '/a.js'
  
  // 非法操作
  obj = {}; // Syntax Error : 'a' is read-only; 
  // Uncaught TypeError: Assignment to constant variable.
  
  // 合法操作
  obj.foo = 'hello'; 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19

四、是否可以使用表达式或变量

• require：可以使用表达式和变量

  let a = require('./a.js')
  a.add()
  
  let b = require('./b.js')
  b.getSum()
  1
  2
  3
  4
  5

• import：静态执行，不能使用表达式和变量，因为这些都是只有在运行时才能得到结果的语法结构。

  // 报错
  import { 'f' + 'oo' } from 'my_module';
  
  // 报错
  let module = 'my_module';
  import { foo } from module;
  
  // 报错
  if (x === 1) {
    import { foo } from 'module1';
  } else {
    import { foo } from 'module2';
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

总结

require/exports 和 import/export 本质上的区别，实际上也就是 CommonJS 规范与 ES Module 的区别。

1. 浏览器在不做任何处理时，默认是不支持 import 和 require；
2. babel 会将 ES6 模块规范转化成 CommonJS 规范；
3. webpack、gulp 以及其他构建工具会对 CommonJS 进行处理，使之支持浏览器环境
   它们有三个重大差异。
   • CommonJS 模块输出的是一个值的拷贝，ES Module 输出的是值的引用。
   • CommonJS 模块是运行时加载，ES Module 是编译时输出接口。

     导致该差异是因为 CommonJS 加载的是一个对象（即 module.exports 属性），该对象只有在脚本运行完才会生成。而 ES Module 不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

   • CommonJS 模块的 require() 是同步加载模块，ES Module 的 import 命令是异步加载，有一个独立的模块依赖的解析阶段。

关于 CommonJS 规范与 ES Module 的区别，大家可以移步至： 【JavaScript高级】模块化规范「一文让你彻底搞懂前端模块化规范 & 区别」 进行阅读。