micro-app scripts bootstrap

[yuxino]

bootstrap

初始化项目依赖。

基座项目有:

• main-react16
• main-vue2
• main-vite

子应用有:

• child-react16
• child-react17
• child-vue2
• child-vue3
• child-vite
• child-angular11

"scripts": {
    "bootstrap": "yarn && npm-run-all --serial install:*",
    "install:main-react16": "cd dev/main-react16 && yarn",
    "install:main-vue2": "cd dev/main-vue2 && yarn",
    "install:main-vite": "cd dev/main-vite && yarn",
    "install:child-react16": "cd dev/children/react16 && yarn",
    "install:child-react17": "cd dev/children/react17 && yarn",
    "install:child-vue2": "cd dev/children/vue2 && yarn",
    "install:child-vue3": "cd dev/children/vue3 && yarn",
    "install:child-vite": "cd dev/children/vite && yarn",
    "install:child-angular11": "cd dev/children/angular11 && yarn",
  },

npm-run-all ---> 运行所有脚本

对应的文件结构如下

micro-app/dev on  dev
➜ tree . -L 2
.
├── children
│   ├── angular11
│   ├── angular14
│   ├── react16
│   ├── react17
│   ├── vite
│   ├── vue2
│   └── vue3
├── main-react16
│   ├── README.md
│   ├── config
│   ├── jest.config.js
│   ├── jsconfig.json
│   ├── mock
│   ├── node_modules
│   ├── package.json
│   ├── public
│   ├── src
│   ├── tests
│   └── yarn.lock
├── main-vite
│   ├── README.md
│   ├── index.html
│   ├── package.json
│   ├── public
│   ├── src
│   ├── tsconfig.json
│   ├── vite.config.ts
│   └── yarn.lock
└── main-vue2
    ├── README.md
    ├── babel.config.js
    ├── package.json
    ├── public
    ├── src
    ├── vue.config.js
    └── yarn.lock

扫了下内容，基本都是模板项目。基座负责通过micro-app引入子应用。路由形如这样：

const routes = [
  {
    path: '/',
    redirect: '/react16/'
  },
  {
    path: '/react16/*',
    name: 'react16',
    component: React16,
  },
  {
    path: '/react17/*',
    name: 'react17',
    component: () => import(/* webpackChunkName: "react17" */ './pages/react17.vue'),
  },
  {
    path: '/vue2/*',
    name: 'vue2',
    component: () => import(/* webpackChunkName: "vue2" */ './pages/vue2.vue'),
  },
  {
    path: '/vue3/*',
    name: 'vue3',
    component: () => import(/* webpackChunkName: "vue3" */ './pages/vue3.vue'),
  },
  {
    path: '/vite/*',
    name: 'vite',
    component: () => import(/* webpackChunkName: "vite" */ './pages/vite.vue'),
  },
  {
    path: '/angular11/*',
    name: 'angular11',
    component: () => import(/* webpackChunkName: "angular11" */ './pages/angular11.vue'),
  },
  {
    path: '/multiple/*',
    name: 'multiple',
    component: () => import(/* webpackChunkName: "multiple" */ './pages/multiple.vue'),
  },
  {
    path: '/self/*',
    name: 'self',
    component: () => import(/* webpackChunkName: "self" */ './pages/self.vue'),
  },
];