在我们学习微前端前,是要做一定的知识储备的,概念 和 代码 结合在一起,才能保证我们完全去理解到一种思想或者一种技术的真正意义。
这一章节最主要是要告诉大家在基于single-spa 学习微前端的时候,需要掌握哪些基础知识,通过了解到这些知识后,我们学起来single-spa 也会快一些,single-spa 学的快了,我们了解微前端的概念也就会要快很多
# js相关
这个就不多说了,前端必备知识基础
# webpack 基础
webpack 其实也是必备的知识点了,如果你使用了官方提供的create-single-spa的包,则不需要手动配置,如果你是基于现有的项目基础上去做的重构,则还是自己手动配置一下会更加安全一些:
- 将
single-spa输出的目标设置为system
// webpack.config.js
{
output: {
libraryTarget: 'system'
}
}
@前端进阶之旅: 代码已经复制到剪贴板
设置该属性的目的,是由于single-spa的部分功能是基于 systemjs 实现的,所以要保证输出的正确使用
- 动态导入模块,不要使用
Optimization
{
entry: {
index: './src/index.js'
}
}
@前端进阶之旅: 代码已经复制到剪贴板
设置单一的入口,通过import()语法动态导入每一个子应用,single-spa 官方的理念就是 “一个子应用是一个动态导入的模块”:
// before
import $ from 'jquery'
function myComponent() {
$('#app').append('<div></div>')
}
// after
function myComponent() {
import('jquery').then(({default: $}) => {
$('#app').append('<div></div>')
})
}
@前端进阶之旅: 代码已经复制到剪贴板
这个就不做太多详解了,webpack官方有详细的解释,就是告诉大家要这么做,理解了即可;
- 针对
webpack的systemjs配置
其中一项配置在上面已经说到了,就是设置libraryTarget,另一项就
