es、commonjs 模块解析原理

基础知识点

es6

1、export {}. 必须要手动指定import {a、b} 或者  import * as all from

2、default 提供匿名export ， import res 可以随意命名

3、import 不加{} 则是导入默认export default， 加了{}则必须在导出export {} 文件中指定具体导出

4、import() 动态导入

commonjs

1、module.exports exports 指向同一内存空对象{} ， 直接赋值对象会导致引用改变 exports = {a:1} ，exports.a =1

webpack 编译模块原理

所有文件都是一个匿名函数，然后被添加到一个数组里面，引入到这个文件时候就执行该匿名函数该文件js就被初始化加载执行了）

模块导入原理：

1、import 导入 通过判断__esModule, es指向 default，commonjs指向中间层变量_default (编译生成)

2、require 导入 全部指向类似于__webpack_exports__参数， es 把 export 指向赋值过去，default会多加一层default属性， commonjs 把module.exports指向赋值过去

a、require 导入解析：commonjs  module.exports 等效于  es  export   {}

b、import 导入解析：commonjs  module.exports 等效于  es  export  default  {}

webpack 编译前

app.js

let name = 0
let getNamge = function(){
  return name
}
let setName = function (){
  name = name + 1
}
console.log(11)

module.exports.getNamge = getNamge
module.exports.name = name
module.exports = {
  name,
  getNamge,
  setName
}

foo.js
 

let name = 0
let getNamge = function(){
  return name
}
let setName = function (){
  name = name + 1
}
console.log(22)
export {
    name as nameLsl
}
export {
  name,
  getNamge,
  setName
}
console.log(33)
export default {
  name,
  getNamge,
  setName
}

inde.js

import foo,{name} from "./foo";
import app from './App'
// var foo = require('./foo')
// var app = require('./App')

console.log(foo)
console.log(app)

console.log(foo.name === app.name)

webpack 编译后