Nauseating Pumpkin Mush

    mpvue-entry-with-subpackage

    1.4.7-alpha • Public • Published

    mpvue-entry

    集中式页面配置,自动生成各页面的入口文件,优化目录结构,支持新增页面热更新

    npm package npm downloads build status codecov codebeat badge license

    目录结构

    ├─build
    ├─config
    ├─src
    │ ├─components
    │ ├─pages
    │ │  └─news
    │ │     │─list.vue
    │ │     └─detail.vue
    │ ├─App.vue
    │ ├─main.js
    │ └─pages.js
    └─package.json
    

    原理

    src/main.js 为模板,使用配置文件中的 pathconfig 属性分别替换 vue 文件导入路径导出信息

    Quickstart

    https://github.com/F-loat/mpvue-quickstart

    vue init F-loat/mpvue-quickstart my-project

    安装

    npm i mpvue-entry -D

    使用

    // webpack.base.conf.js
    const MpvueEntry = require('mpvue-entry')
     
    module.exports = {
      entry: MpvueEntry.getEntry('src/pages.js'),
      ...
      plugins: [
        new MpvueEntry(),
        ...
      ]
    }
    // pages.js
    module.exports = [
      {
        path: 'pages/news/list', // 页面路径,同时是 vue 文件相对于 src 的路径,必填
        config: { // 页面配置,即 page.json 的内容,可选
          navigationBarTitleText: '文章列表',
          enablePullDownRefresh: true
        }
      }
    ]

    参数

    MpvueEntry.getEntry(paths)
    • paths String/Object

    paths 为 String 类型时作为 pages 的值,自定义值为绝对路径或相对于项目根目录的相对路径(这里的相对路径实际上是相对于被执行文件的上级目录的)

    // 默认值
    {
      // 页面配置文件
      pages: 'src/pages.js',
      // 主入口文件,作为模板
      main: 'src/main.js',
      // 入口模板文件,优先级较高
      template: undefined,
      // 项目配置文件
      app: 'dist/app.json',
      // 各页面入口文件目录
      entry: 'mpvue-entry/dist/'
    }
     
    // 示例
    MpvueEntry.getEntry({
      pages: 'src/router/index.js',
      app: 'wxapp/app.json',
    })

    Tips

    • 首页默认为 pages.js 中的第一项,但会被 main.js 中的配置覆盖

    • path 属性兼容绝对路径,且仅指定 path 属性时可简写为字符串形式

    // pages.js
    module.exports = [
      '/pages/news/list',
      '/pages/news/detail'
    ]
    • 可通过以下形式的注释指定 main.js 特有代码
    console.log('hello world') // app-only
     
    /* app-only-begin */
    console.log('happy')
    console.log('coding')
    /* app-only-end */
    • 可通过 native 属性指定页面为原生开发,不做编译处理
    // pages.js
    module.exports = [
      {
        path: 'pages/news/list',
        native: true
      }
    ]
    • 可通过 subPackage 属性指定页面需分包加载(配合 Quickstart 模板使用效果更佳)
    // pages.js
    module.exports = [
      {
        path: 'packageA/news/detail',
        subPackage: true
      }
    ]
    • 可通过 root 属性指定分包根路径,指定后 subPackage 属性会自动置为 true
    // pages.js
    module.exports = [
      {
        path: 'pages/news/detail',
        root: 'pages/news'
      }
    ]

    示例

    以 mpvue-loader@1.1.0 为界(其实用法是一样的)

    Thanks

    Install

    npm i mpvue-entry-with-subpackage

    DownloadsWeekly Downloads

    0

    Version

    1.4.7-alpha

    License

    MIT

    Unpacked Size

    20.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • jojochilly