@shene/create-pages-json
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

@shene/create-pages-json

根据路由配置生成 uni-app 的 pages.json 文件,开发时支持实时监听路由文件变化,重新生成 pages.json 文件。

痛点

通常的,当我们开发 uni-app 时,pages.json文件都是一个不可磨灭的痛,添加页面时必须先在pages.json中添加配置,而且不可动态更改,无法个性化配置。


特性

1、用法简单,配置便捷 2、开发时支持实时监听

Step 1

安装工具

# Yarn
yarn add @shene/create-pages-json --dev

# Npm
npm install @shene/create-pages-json --save-dev

Step 2

生成配置文件

npx pages-config-json-init

此时项目根目录会生成一个 pages.config.json 的文件,内容如下:

{
  "rootPath": "./",
  "modulePath": "./",
  "defaultConfigFile": "",
  "routeFileName": ""
}

可以手动自行创建

配置参数说明

rootPath

生成的 pages.json 存放的位置,对于 uni-app 项目,如果是用cli创建的,rootPath的值应为"./src", 如果是用工具创建的,rootPath的值应为"./",如果不配置,默认值为"./"

modulePath

模块目录路径,有些项目是拆成子模块开发的,命令会在该路径下递归查找 "routeFileName"配置的文件名称,如果不配置,默认值为"./",从根目录往下查找。

defaultConfigFile

由于pages.json文件的配置中,不光有页面路由配置,还有很多其他的全局配置,所以其他配置需要有一个文件来承载,此参数为必填参数,必须是相对路径+文件名称,例如:"./src/global.js",

module.exports = {
  pages: [],
  globalStyle: {
    navigationBarTextStyle: 'black',
    navigationBarTitleText: 'uni-app',
    navigationBarBackgroundColor: '#F8F8F8',
    backgroundColor: '#F8F8F8',
  },
}

必须使用 commonjs 导出。

routeFileName

路由配置文件名称,此参数为必填参数,例如:"index.route.js",

module.exports = [
  {
    path: '/pages/ep-app-login/views/login/index',
    name: 'login',
    isRoot: true, // 此属性会让改路由生成在pages.json的首位。
    style: {
      navigationBarTitleText: '绑定',
    },
  },
  {
    path: '/pages/ep-app-login/views/home/index',
    name: 'home',
    aliasPath: '/',
    style: {
      navigationBarTitleText: '首页',
    },
  },
]

必须使用 commonjs 导出。

Step 3

开始生成 pages.json 文件

  1. 单独使用
npx create-uniapp-pages-json
  1. 配置 package.json 中
{
  ...
  "scripts": {
    "create": "create-uniapp-pages-json",
    ...
  },
  ...
}
  1. 配置 package.json 中和开发命令并行使用
{
  ...
  "scripts": {
    "serve": "create-uniapp-pages-json && npm run dev:h5",
    "build": "create-uniapp-pages-json && npm run build:h5",
    ...
  },
  ...
}

Step 4

可选,如果需要在开发中实时监听routeFileName | defaultConfigFile配置文件的变化,还需要在vue.config.js文件中使用webpack插件

const { WatchUniAppRoutesPlugin } = require('@shene/create-pages-json');

module.exports = {
  configureWebpack: {
    plugins: [
      new WatchUniAppRoutesPlugin()
    ]
  },
  ...
}

欢迎使用,并给我一些反馈和建议,让这个插件做的更好,新功能准备中

Package Sidebar

Install

npm i @shene/create-pages-json

Weekly Downloads

2

Version

1.0.0

License

MIT

Unpacked Size

15.7 kB

Total Files

20

Last publish

Collaborators

  • shenqingzhu