文章目录
  1. 1. 项目约定
    1. 1.1. 多页面
  2. 2. 获取目录名
    1. 2.1. glob模块
    2. 2.2. utils
  3. 3. 结束语

最近项目中需要搭建一个多页面的环境,包括本地路由服务和分页面打包。
本节介绍获取每个页面目录的名字的过程。

项目约定


多页面

上节我们讲述了项目的目录结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
├── build/ # webpack配置参数文件
│ └── ...
├── src/ # 项目代码入口
│ ├── page1/ # 第一个页面或者应用
│ │ ├── main.js # 页面/应用入口文件
│ │ └── ...
│ ├── page2/ # 第二个页面或者应用
│ │ ├── main.js # 页面/应用入口文件
│ │ └── ...
│ └── pageN/ # 第N个页面或者应用
│ ├── main.js # 页面/应用入口文件
│ └── ...
├── dist/ # 项目打包代码
│ ├── page1/ # 第一个页面或者应用
│ │ ├── [hash].js
│ │ └── index.html # 页面/应用入口文件
│ ├── page2/ # 第二个页面或者应用
│ │ ├── [hash].js
│ │ └── index.html # 页面/应用入口文件
│ └── pageN/ # 第N个页面或者应用
│ ├── [hash].js
│ └── index.html # 页面/应用入口文件

这里我们可以看到我们项目代码的入口位于src文件夹,并且每个页面或者app都以目录名为页面的名字。
而打包后的文件也一样,以目录为单位,支持单个打包或是全部打包。

获取目录名


既然目录名字会在我们的项目搭建中起这么重要的作用,这里我们就将它们获取存起来。

glob模块

这里我们将使用glob模块,它允许你使用*等符号,来写一个glob规则,像在shell里一样,获取匹配对应规则的文件。

  • 安装依赖
1
npm i glob
  • 使用方式
1
2
3
4
5
6
7
8
9
var glob = require("glob")
// options可选
glob("**/*.js", options, function (er, files) {
// files是匹配到文件的文件名数组
// 如果 `nonull` 选项被设置为true,而且没有找到任何文件
// 那么files就是glob规则本身,而不是空数组
// er是当寻找的过程中遇的错误
})
  • 匹配规则
    • *: 匹配该路径段中0个或多个任意字符
    • ?: 匹配该路径段中1个任意字符
    • [...]: 匹配该路径段中在指定范围内字符
    • *(pattern|pattern|pattern): 匹配括号中多个模型的0个或多个或任意个的组合
    • !(pattern|pattern|pattern): 匹配不包含任何模型
    • ?(pattern|pattern|pattern): 匹配多个模型中的0个或任意1个
    • +(pattern|pattern|pattern): 匹配多个模型中的1个或多个
    • @(pattern|pat*|pat?erN): 匹配多个模型中的任意1个
    • **: 和*一样,可以匹配任何内容,但**不仅匹配路径中的某一段,而且可以匹配'a/b/c'这样带有'/'的内容,所以它还可以匹配子文件夹下的文件

如果熟悉正则的你,相信也对这些规则了如指掌了。

utils

我们把这块获取目录名的功能作为工具单独管理起来,放在build/utils.js文件里。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// build/utils.js文件
var glob = require('glob');
function getEntries(globPath) {
// 获取所有匹配文件的文件名数组
var files = glob.sync(globPath),
entries = {}
files.forEach(function (filepath) {
// 取倒数第二层(view下面的文件夹)做包名
var split = filepath.split('/')
var name = split[split.length - 2]
// 保存{'目录名': '目录路径'}
entries[name] = './' + filepath
})
return entries
}
// 获取所有匹配src下目录的文件夹名字,其中文件夹里main.js为页面入口
var entries = getEntries('src/**/main.js')
module.exports = {
entries: entries
}

结束语


本节介绍的内容不是很多,主要是声明了单页面的目录规范,以及简单介绍了glob模块,并提供了个获取目录名的工具。
可参考代码github-vue-multi-pages,主要是这套环境使用在vue上的demo。

查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

码生艰难,写文不易,给我家猪囤点猫粮了喵~

作者:被删

出处:https://godbasin.github.io

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

文章目录
  1. 1. 项目约定
    1. 1.1. 多页面
  2. 2. 获取目录名
    1. 2.1. glob模块
    2. 2.2. utils
  3. 3. 结束语