js require和import

宿主环境不同：

• 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执行完毕