基础知识点
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 编译后