多入口多页面项目？？？
众所周知，一般的webpack项目都是单页面项目，我们也是可以配置webpack为多入口项目的。
为什么使用多入口架构？
一般情况下，我们使用vue cli3来打包单页面应用程序，只需要使用默认配置的一个入口就可以了。但是，如果一个项目很大，有很多小的分项目，这种情况就比较适合多页面程序了，也就是webpack多入口。
思考：多入口解决哪些痛点？
例如我司的OA系统，比较复杂，包含XX、XXX、不可描述等多个子系统，如果全部放在一个vue项目中去做的话，那么就出现了一些问题：
- 无法进行全局的掌控；
- 开发一个子系统时，不需要启动另外一个系统；
- 热部署一个子系统时需要编译所有系统等；
这时，使用多入口多页面架构就能避免以上的问题。
怎么配置vue多入口项目？
首先，我们先创建一个vue项目，这个请参考cli3官网的教程。
duang~我们的项目就创建好了，新建项目的目录结构应该像下图这个样子：
目录结构
我们先创建两个子项目，在src目录下新建文件夹sub-pro和sub-pro1，然后在子项目下分别新建App.vue和main.ts:
// sub-pro/App.vue
<template>
<div id="app">
sub-pro
</div>
</template>
// sub-pro/main.ts
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App),
}).$mount('#app')
// sub-pro1/App.vue
<template>
<div id="app">
sub-pro1
</div>
</template>
// sub-pro1/main.ts
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App),
}).$mount('#app')
这样，我们的两个子项目就已经配置好了，接下来配置vue.config.js（在项目根目录下）文件：
module.exports = {
pages: {
"index":{
entry: "src/main.ts",
},
"sub-pro":{
entry: "src/sub-pro/main.ts",
},
"sub-pro1":{
entry: "src/sub-pro1/main.ts",
}
}
}
这里我们配置了三个入口，分别是
src/main.ts、src/sub-pro/main.ts、src/sub-pro1/main.ts第一个入口是我们的主入口，当我们项目启动后会进入这个入口，剩下的两个就是我们的子项目的入口。
这样，我们就配置完啦，可以启动了。命令行运行：
yarn run serve
熟悉的vue初始化界面：
我们的子项目在哪里呢？
现在我们来修改src/App.vue:
<!--src/App.vue-->
<template>
<div id="app">
<div id="nav">
<a href="/sub-pro" target="_self">sub-pro</a> |
<a href="/sub-pro1" target="_self">sub-pro1</a>
</div>
<router-view/>
</div>
</template>
保存，刷新浏览器就可以看到home和about的超链接被我们改成了sub-pro和sub-pro1的超链接啦
改后的界面
点击超链接，就可以访问我们的sub-pro和sub-pro1子项目了。
问题来了，假设我们只开发sub-pro子项目，怎么只启动这个项目呢？
这个时候，我们就需要一个命令行工具来帮我们实现了inquirer，这个命令行库具体可以看官方文档。
具体的思路就是，使用inquire来询问开发者启动哪些项目，然后保存这个配置，然后使用vue.config.js来读取配置项启动选择的项目。
我们需要一个配置文件来管理我们的多入口启动项，我们在根目录下新建pages.yml：
projects:
index:
entry: 'src/main.ts'
sub-pro:
entry: 'src/sub-pro/main.ts'
sub-pro1:
entry: 'src/sub-pro1/main.ts'
接下来，我们需要管理我们的多入口启动项，我们在项目根目录下新建pages.js：
'use strict'
const inquirer = require('inquirer')
const yaml = require('js-yaml') // 一个解析yaml的库
const fs = require('fs')
const path = require('path')
const historyFilePath = path.join(__dirname, 'pages.json')
const pages = yaml.safeLoad(
fs.readFileSync(path.join(__dirname, './pages.yml'), 'utf8')
)
const { projects } = pages
const hiddenChoices = ['index']
const projectsList = Object.keys(projects)
.filter(projectName => hiddenChoices.indexOf(projectName) === -1)
.map(projectName => ({
name: projectName
}))
inquirer
.prompt([
{
type: 'confirm',
name: 'use_prev',
message: '使用上次的配置?',
default: true,
when() {
return fs.existsSync(historyFilePath)
},
},
{
type: 'checkbox',
message: '选择项目',
name: 'projects',
choices: projectsList,
when(answers) {
return !fs.existsSync(historyFilePath) || !answers.use_prev
},
validate(answer) {
if (answer.length < 1) {
return '你必须至少选择一个项目.'
}
return true
},
},
])
.then(answers => {
if (!answers.use_prev || !fs.existsSync(historyFilePath)) {
let collections = {}
collections.default = projects
collections.projects = {}
answers.projects.forEach(projectName => {
collections.projects[projectName] = projects[projectName]
})
const data = JSON.stringify(collections, null, ' ')
fs.writeFileSync(historyFilePath, data)
}
const projectList = Object.keys(require('./pages.json').projects)
console.log(`使用项目: \x1b[32m${projectList.join(', ')}\x1b[0m`)
})
这里就将开发者选择的项目保存在了pages.json中了，接下来还要修改vue.config.js中的pages的配置：
const isProduction = process.env.NODE_ENV === 'production'
let pages
const pagesConfigs = require('./pages.json')
if (isProduction) {
pages = pagesConfigs.default
} else {
pages = pagesConfigs.projects
}
module.exports = {
pages
}
这样，我们就可以做到单独启动sub-pro这一个子项目啦。
问题来了，怎么只部署一个子项目？
这里我的思路是通过规范git commit message，利用commit message来确定打包部署某一个或某几个子项目，具体还在思索中，所以步骤就没有啦。
（未完待续。。。)
网友评论