mpvue-entry: 集中式页面配置插件

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

目录结构

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

原理

以 src/main.js 为模板，使用配置文件中的 path 及 config 属性分别替换 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',
  // 主入口文件，作为模板
  template: 'src/main.js',
  // 项目配置文件
  app: 'dist/app.json',
  // 各页面入口文件目录
  entry: 'mpvue-entry/dist/'
}

// 示例
MpvueEntry.getEntry({
  pages: 'src/router/index.js',
  app: 'wxapp/app.json',
})
复制代码

Tips

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

// pages.js
module.exports = [
  '/pages/news/list',
  '/pages/news/detail'
]
复制代码

• 在 main.js 中引用文件时需通过 @ 标识引用

// 正确
import App from '@/App'

// 错误
import App from './App'
复制代码

• 需在 App.vue 或 main.js 中指定 mpType 为 app

// App.vue
export default {
  mpType: 'app'
}

// 或 main.js
App.mpType = 'app'
复制代码

• 各页面的入口文件默认保留 main.js 中除 export default {[^]*} 及 Mixin 语句外所有代码，可通过以下形式的注释额外指定 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
  }
]
复制代码

示例

• 基础用法
• 配置文件复用

Thanks

• webpack-watched-glob-entries-plugin

转载于:https://juejin.im/post/5ae4069951882567382f57eb