bestspa

功能概要

bestspa是一个可以实现快速对接single-spa或者qiankun等微服务架构的子系统脚手架。适配react为基础框架的项目。 single-spa官网：https://single-spa.js.org/ qiankun官网：https://qiankun.umijs.org/

整个脚手架以减少开发成本、减少因接微服务对业务代码的侵入性为目的，分为两种模式：新建系统（init）、老系统重构（addspa）。 init模式能快速构建一个对接微服务系统的子系统 addspa模式能在原先存在并且不具备对接微服务系统的基础上，生成快速对接微服务的入口，并且提供一套基于webpack4的打包编译方案

使用步骤

全局安装

全局安装bestspa以及模块生成器create-my-page

npm install create-my-page -g
npm install bestspa -g

init模式

进入需要新增项目的目录，执行：

create-bestSpa init Test
(Test为新建的工程名)

执行后生成的目录结构如下：

-Test
   |_bestspa
   |     |_pages
   |     |    |_Test1.js
   |     |    |_Test2.js
   |     |   
   |     |_index.html
   |     |_pages.js
   |     |_pageTemplate.js
   |     |_spaTemplate.js
   |
   |_.createPage.js
   |_package.json
   |_webpack.config.spa.dev.js
   |_webpack.config.spa.dist.js

进入Test目录，执行安装：

npm install

安装完毕后启动开发模式：

npm run start

项目默认端口2101 http://localhost:2101/Test1.html可访问测试页面Test1 http://localhost:2101/Test2.html可访问测试页面Test2 生产发布模式：

npm run build

执行后生成dist目录，目录内包含Test1.html、Test2.html、Test1.js、Test2.js

addspa模式

进入需要对接的系统目录，执行：

create-bestSpa addspa

执行完子系统会新增一个bestspa目录，以及两个内置的webpack配置文件等，具体结构如下

子系统
   |____bestspa
   |     |   
   |     |_index.html
   |     |_pages.js
   |     |_pageTemplate.js
   |     |_spaTemplate.js
   |
   |_.createPage.js
   |_webpack.config.spa.dev.js
   |_webpack.config.spa.dist.js

在子项目package.json中新增两种已生成的webpack.config.spa.dev.js（开发模式）和webpack.config.spa.dist.js（生产发布模式）打包模式，具体配置可以参考：

·····
  "scripts": {
    "spa-dev": "webpack-dev-server --open --config  webpack.config.spa.dev.js",
    "spa-dist": "webpack --config webpack.config.spa.dist.js"，
  },
·····

addspa模式其他注意事项：

1、已存在的老项目webpack版本等不一定都是webpack4,webpack.config.spa.dev.js以及webpack.config.spa.dist.js是按webpack4版本做的配置案例，所以版本不一样的项目需要对这两个文件的module等配置项做适配版本的调整 2、老项目部分babel配置项是采用.babelrc的方式配置，或者有例子以外的loader、babal插件等，也可以自行调整配置项

配置页面说明

打包生成模块主入口说明

bestspa目录下的pages.js为抽取打包模块的主入口。脚手架默认给出的pages.js配置如下：

module.exports = [
  {
    name: 'Test1',
    template: '/bestspa/pageTemplate.js',
    pagename: 'Test1.js',
    pagepath: '/page/',
    props: {}
  },
  {
    name: 'Test2',
    template: '/bestspa/pageTemplate.js',
    pagename: 'Test2.js',
    pagepath: '/page/',
    props: {}
  },
  {
    name: 'Test3',
    template: '/bestspa/pageTemplate.js',
    pagename: 'Test3.js',
    pagepath: '/page/',
    props: {}
  }
];

字段说明如下： name:打包生成的js文件名以及html名 pagename:抽取打包的js文件名 pagepath:抽取打包的js文件地址 template：若不存在抽取打包的js文件，则根据此目录下的模板自动生成模块

例子详细解析如下： bestspa/pages.js定义了需要打包生成三个模块：Test1、Test2、Test3。分别对应page下的Test1.js、Test2.js、Test3.js.Test3.js在page下不存在，则在打包之前会先在page下生成根据模板/bestspa/pageTemplate.js自动生成的Test3.js template的地址以及引用文件可以自定义，一般的系统整体页面功能样式等有固定的模板和套路，可以多设置几套模板，再脚手架中自动生成模块 注意:修改完pages.js入口文件，需要重新编译（例如init模式下自定义的start模式：npm run start）

关于模板生成，脚手架中内置了create-my-app帮助快速生成页面。如果想要了解更多可移步：https://www.jianshu.com/p/2200fc47b683

如何新增模块

例如要新增Test4模块，则在主入口文件bestspa/pages.js新增Test4的配置内容，具体结果如下：

module.exports = [
  {
    name: 'Test1',
    template: '/bestspa/pageTemplate.js',
    pagename: 'Test1.js',
    pagepath: '/page/',
    props: {}
  },
  {
    name: 'Test2',
    template: '/bestspa/pageTemplate.js',
    pagename: 'Test2.js',
    pagepath: '/page/',
    props: {}
  },
  {
    name: 'Test3',
    template: '/bestspa/pageTemplate.js',
    pagename: 'Test3.js',
    pagepath: '/page/',
    props: {}
  }，
  {
    name: 'Test4',
    template: '/bestspa/pageTemplate.js',
    pagename: 'Test4.js',
    pagepath: '/page/',
    props: {}
  }
];

例子中Test4模块的入口文件在/page/Test4.js，在page下新增Test4.js，然后重新编译。或者不新建Test4.js,直接重新编译，在自动生成的Test4.js上修改

如果是addspa对接原先就存在的项目，只需将pagename以及pagepath对应已存在的模块入口，然后重新编译即可

其他细节

打包生成的html文件的dom节点id,目前是固定的取了package.json中的name以及模块入口文件 bestspa/pages.js中的name,中间加"_"拼接而成