宿主环境不同:
- require:属于commonjs
- import:属于es6,如果script脚本没有设置type=‘module’,则不能使用import语句;
模块运行时机不同
- require:运行时加载
- import:编译时加载(可以做tree shaking)
加载方式不同
- require:实质上整体加载了fs对象(fs模块),然后再从fs对象上读取方法
- import:实质上从模块加载对应的方法,其他方法不加载
值的引入方式不同
- require:模块输出的是一个值的拷贝
// test.js
let a = 1
function plus() {
a++
}
function get() {
return a
}
exports.a = a
exports.plus = plus
exports.get = get
// main.js
const { a, plus, get } = require('./test.js')
console.log(a) // 1
plus()
console.log(a) // 1,因为只是值的拷贝,修改原值不影响导入后的值
console.log(get()) // 2,因为修改的是导入前的值
- import:ES6模块输出的是值的引用
// a.js
export let num = 1
export const addNumber = () => {
num++
}
// main.js
import { num, addNumber } from './a'
//因为更改了值的引用地址
num = 2 //会报错:Uncaught TypeError: Assignment to constant variable
================================
// test.js
export let a = 1
export function plus() {
a++
}
// main.js
import { a, plus } from './test.js'
console.log(a) // 1
plus()
console.log(a) // 2,因为导入的是引用,所以修改导入前的值会影响现在的值
调用位置不同
- require:可以在代码中的任何位置调用require
- import:只能在文件开头定义,除了es10中的import()语法
let say = await import('./say.js');
// 错误写法
function say() {
import name from './a.js'
export const author = 'dog'
}
// 错误写法
isexport && export const name = '《React进阶实践指南》'
import声明提升
//main.js
console.log('main.js开始执行')
import say from './a.js'
import say1 from './b.js'
console.log('main.js执行完毕')
//a.js
import b from './b.js'
console.log('a模块加载')
export default function say() {
console.log('hello , world')
}
//b.js
console.log('b模块加载')
export default function sayhello(){
console.log('hello,world')
}
//输出内容
b模块加载
a模块加载
main.js开始执行
main.js执行完毕