发表于

require和import的区别

1.规范不同

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

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

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

2.书写方式不同

require/exports ：

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

import/export :

1
2
3
4
5
6
7
8
9
10
11
12
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'

3.本质不同

require 运行时加载

1
2
3
4
5
6
7
8
// 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 编译时加载

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

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