微前端-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的基座配置和子应用如何配置，如何独立部署