微前端-qiankun(一)

·  阅读 3163
微前端-qiankun(一)

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

创建乾坤基座的项目

基座的技术我选择的是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的基座配置和子应用如何配置,如何独立部署

分类:
前端