发布于

require和import的区别

Authors
  • avatar
    Name
    田中原
    Twitter

require和import的区别

目录

require和import的区别

规范不同

模块化规范： 即为 JavaScript 提供一种模块编写、模块依赖和模块运行的方案。

  • require方法是JavaScript 社区中的开发者自己草拟的规则CommonJs推出的。
  • import/export 则是TC39 制定的新的 ECMAScript 版本，即 ES6（ES2015）中包含进来。

CommonJS是Node.js中模块化的规范，Node.js无法直接兼容es6语法。现在在Node中使用的 import语法都是由babel编译成 require/exports 来执行的

书写方式不同

require/exports ：

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

import/export :

import fs from 'fs'
import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'
export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'

本质不同

require 运行时加载

// CommonJS模块
let { stat, exists, readFile } = require('fs')
// 等同于
let _fs = require('fs')
let stat = _fs.stat
let exists = _fs.exists
let readfile = _fs.readfile

上面代码的实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取3个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

Import 编译时加载

// ES6模块
import { stat, exists, readFile } from 'fs'

上面代码的实质是从fs模块加载3个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。