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