小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
创建乾坤基座的项目
基座的技术我选择的是react,可以根据自己的需求,选择react/vue/angular都可
npx create-react-app micro-app
出现所有的webpack的配置
npm run eject
安装 less less-loader
css 我选择了less,可以安装sass都可
npm i --save-dev less less-loader
***注意less 和 less-loader版本的配置
在webpack.config.js中进行less的配置,与sass保持一致即可
// less配置
const lessRegex=/\.less$/;
const lessModuleRegex= /\.module\.less$/;
// less配置
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
安装 路由,乾坤,antd
npm i react-router-dom
npm i qiankun -S
npm i antd
关闭eslint
create-react-app
中是用 process.env.DISABLE_ESLINT_PLUGIN=true
字段去设置eslint的开启与关闭
在相应的start.js
中添加 process.env.DISABLE_ESLINT_PLUGIN=true
即可
配置基座的一些简单的参数
registerMicroApps,start,runAfterFirstMounted以及 setDefaultMountApp均是必选项
registerMicroApps:挂载微应用的注册信息,以及基座的一些生命周期函数
start:启动
setDefaultMountApp:设置进入主应用后的默认加载的微应用
runAfterFirstMounted:第一个微应用加载后,需要调用的方法,一般用于埋点等
下期会更新如何更新qiankun的基座配置和子应用如何配置,如何独立部署