更新记录
1.0.1(2020-06-27) 下载此版本
add
- 首次提交
平台兼容性
uni-merge-pages
之前有写这样一个库,通过读取 pages.json
文件内容中的 pages
、subPackages
选项作为 uni-simple-router 的路由表,再借助 webpack 注入全局变量,完成一些列的操作。然而 此库刚好相反,它可以让你编写 js
模块文件 自动完成 pages.json
写入。妈妈再也不用担心配置混乱的问题啦。上手难度一颗星 阅读完安装后直接[跳入注意事项即可]()
安装
您可以使用 Yarn
或 npm
安装该软件包(选择一个):
Yarn
yarn global add uni-merge-pages nodemon
npm
npm install uni-merge-pages nodemon -g
注意事项
- 使用之前请把
pages.json
中的所有内容备份到其他文件,避免覆盖文件。HBuilder X
创建页面时,即使勾选在 pages.json 中注册
也同样无效。插件只认模块化输出的产物。 - 模块化js必须在结尾使用
;
这样才能通知到插件更准确的捕捉。 - 目标捕捉内容默认是
const
声明,大写变量 包括:PAGES、GLOBALSTYLE、EASYCOM、TABBAR、CONDITION、SUBPACKAGES、PRELOADRULE、PAGESOTHER
- 禁止在对象最后一对
key/value
后 使用注释,如果需要注释请移步到key/value
头部上 - 插件默认包含提取内容仅有7个,
workers
默认是没包含的,如果需要写入到pages.json
请使用PAGESOTHER
包含 pages.json
禁止手动往里面添加内容,因为下次热更直接会覆盖。请在模块js
下添加。
开始使用
第一步:配置 uni.config.js
文件
在项目根目录或者任何地方新建一个 uni.config.js
文件,简单的配置一下。提供一些必要的选项即可。
// uni.config.js
const {resolve}=require('path');
module.exports = {
publicPath:'', //预设一个公共路径
nodemon:{
watch:[ //监听当前项目根目录下的config文件目录 包括所有文件 默认只提取js文件
resolve(__dirname, './config/*'),
],
}
}
以上示例是在当前项目根目录下,如果你是新建在其他地方。那请修改 watch
路径,记住是 绝对路径。然后再通过 cli
传递 --config xxx/xxx/uni-config.js
路径即可。默认读取项目根目录下的 uni-config.js
还想更细腻一点的配置?安排
// uni.config.js
const {resolve}=require('path');
module.exports = {
publicPath:'',
//只提取 这三个文件中的内容作为 pages.json 中的写入物 记住绝对路径 像下面这样
includes: [
resolve(__dirname,'./config/pages.js'),
resolve(__dirname,'./config/tabbar.js'),
],
//插件提取完成后 会通知你 你可以进一步修改内容 并返回给你 插件 记住一定要 next
transformHook:function(pagesStr,extractStr,next){
next(extractStr);
},
nodemon:{
watch:[
resolve(__dirname, './config/*'),
],
// 显示更详细的日志
verbose: true,
}
}
第二步:预设执行脚本
有两种方式实现:
第一种在当前项目根目录下执行 npm init -y
编写 scripts
脚本即可
{
"name": "xxxxxx",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:pages": "uni-merge-cli"
},
"keywords": [],
"author": "",
"license": "ISC"
}
需要使用时执行 npm run build:pages
即可。
第二种直接打开 dos
cd 到项目根路径下 执行 uni-merge-cli
即可。
第三步:编写默认提取物文件代码
//config/pages.js
const PAGES = [
// #ifdef APP-NVUE
{
path: "pages/index33/index333",
name:'index33'
},
// #endif
{
"path": "index2/index2",
"style": {
"navigationBarTitleText": "uni-app",
}
},
];
export default PAGES;
//config/tabbar.js
const TABBAR = {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#f00",
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件"
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}]
};
export default TABBAR;
如果你没有预设 uni-config.js
中的 rule
。请按照上面的配置进行编写,大写声明法
记住在一个声明完成的对象后面加上 ;
以便于插件精准提取。 如果不习惯这样的写法 你可以自己编写 rule
正则来提取即可。 在每个对象最后一个key/value后禁止使用注释,请移步到头部注释
额外参数写入到 pages.json
因为插件默认只有 7
个提取物。 包括:globalStyle、pages、easycom、tabBar、condition、subPackages、preloadRule
。而 workers
是没有包含在内的。如果你想写入多个插件没包含的提取物进去,可以这样做。
// xxxx/config/other.js
const PAGESOTHER= {
workers:'workers',
otherConfig:{
name:'hhyang'
}
};
默认插件会把 PAGESOTHER
下声明的所有扁平成一个对象,平级的写入到pages.json
中
默认配置项
uni-config.js
中的配置最后会和默认配置进行合并,你可以在 uni-config.js
中编写任何你想要的代码
module.exports={
//预设在 pages 节点下 path 的公共路径
publicPath:'',
// 需要监听的文件目录下所包含的js文件 必须绝对路径 空则读取监听目录下的所有文件
includes: [],
// 提取文件内容的正则规则
rule: {
globalStyle: /(?<=const\s+GLOBALSTYLE\s*=\s*)\{[\s\S]*?}(?=\s*;)/,
pages: /(?<=const\s+PAGES\s*=\s*)\[[\s\S]*?](?=\s*;)/,
easycom: /(?<=const\s+EASYCOM\s*=\s*)\{[\s\S]*?}(?=\s*;)/,
tabBar: /(?<=const\s+TABBAR\s*=\s*)\{[\s\S]*?}(?=\s*;)/,
condition: /(?<=const\s+CONDITION\s*=\s*)\{[\s\S]*?}(?=\s*;)/,
subPackages: /(?<=const\s+SUBPACKAGES\s*=\s*)\[[\s\S]*?](?=\s*;)/,
preloadRule: /(?<=const\s+PRELOADRULE\s*=\s*)\{[\s\S]*?}(?=\s*;)/,
pagesother:/(?<=const\s+PAGESOTHER\s*=\s*)\{[\s\S]*?}(?=\s*;)/
},
// 这些是 nodemon 的所有配置
nodemon:{
"verbose": false,
"execMap": {
"js": "node --harmony"
},
"restartable": "rs",
"ignore": [".git", "node_modules/*"],
"env": {
"NODE_ENV": "production"
},
"ext": "js"
}
}