Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/F-loat/mpvue-entry
⛓️ 集中式页面配置，统一构建入口，支持新增页面热更新
https://github.com/F-loat/mpvue-entry
entry mpvue webpack
Last synced: about 2 months ago
JSON representation
⛓️ 集中式页面配置，统一构建入口，支持新增页面热更新
- Host: GitHub
- URL: https://github.com/F-loat/mpvue-entry
- Owner: F-loat
- License: mit
- Created: 2018-03-30T09:43:27.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T09:10:13.000Z (about 2 years ago)
- Last Synced: 2024-10-30T05:56:07.073Z (about 2 months ago)
- Topics: entry, mpvue, webpack
- Language: JavaScript
- Homepage:
- Size: 896 KB
- Stars: 353
- Watchers: 11
- Forks: 56
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-mpvue - mpvue-entry - 集中式页面配置，避免重复编辑各页面的 main.js 文件，优化目录结构。 (工具 / 目录)
README
# mpvue-entry
> 自动生成构建入口，避免编写大量重复的 main.js 文件
[](https://npmjs.org/package/mpvue-entry)
[](https://npmjs.org/package/mpvue-entry)
[](https://travis-ci.org/F-loat/mpvue-entry)
[](https://codecov.io/gh/F-loat/mpvue-entry/branch/master)
[](https://codebeat.co/projects/github-com-f-loat-mpvue-entry-master)
[](https://github.com/F-loat/mpvue-entry/blob/master/LICENSE)
## 目录结构
``` txt
├─build
├─config
├─src
│ ├─components
│ ├─pages
│ │ └─news
│ │ │─list.vue
│ │ └─detail.vue
│ ├─App.vue
│ ├─app.json
│ └─main.js
└─package.json
```
## Quickstart
> https://github.com/F-loat/mpvue-quickstart
``` bash
vue init F-loat/mpvue-quickstart my-project
```
## 安装
``` bash
npm i mpvue-entry@next -D
```
## 使用
> v2.0 版本仅支持 mpvue-loader@^1.1.0，兼容 megalo
``` js
// webpack.base.conf.js
const MpvueEntry = require('mpvue-entry')
module.exports = {
entry: MpvueEntry.getEntry('src/app.json'),
...
plugins: [
new MpvueEntry(),
...
]
}
```
``` js
// app.json - 支持 js 格式，兼容微信小程序官方配置规范
{
"pages": [
{
"path": "pages/news/list", // 页面路径，同时是 vue 文件相对于 src 的路径，必填
"config": { // 页面配置，即 page.json 的内容，可选
"navigationBarTitleText": "文章列表",
"enablePullDownRefresh": true
}
}
],
"window": {}
}
```
## 参数
* paths: `String/Object`
> paths 为 `String` 类型时作为 config 的值，为绝对路径或相对于项目根目录的相对路径
| property | default | describe |
| :-: | :-: | :-: |
| config | 'src/app.json' | 项目配置文件 |
| main | 'src/main.js' | 主入口文件，作为模板 |
| template | 'src/main.js' | 入口模板文件，优先级较高 |
| entry | 'mpvue-entry/dist/' | 各页面入口文件目录 |
``` js
// 示例
MpvueEntry.getEntry({
config: 'src/app.js',
main: 'src/index.js'
})
```
* pages `[String/Object]`
> pages 元素为 `String` 类型时作为 path 的值，为绝对路径或相对于项目根目录的相对路径
| property | type | default | describe |
| :-: | :-: | :-: | :-: |
| path | String | - | 文件路径 |
| config | Object | {} | 页面配置 |
| route |String | - | 页面路由 |
| native | Boolean | false | 原生页面 |
| subPackage | Boolean | false | [分包加载](#quickstart) |
| root | String | - | 分包根路径 |
| name | String | `root` | 分包别名 |
| independent | Boolean | false | 独立分包 |
``` js
// 示例
[
'pages/index',
{
path: 'pages/news/list',
config: {
navigationBarTitleText: '页面标题'
},
route: 'pages/news/list/main'
},
{
path: 'package/news/detail',
root: 'package/news',
subPackage: true,
independent: true
}
]
```
## Tips
* 首页为 `pages` 数组的第一项
* 分包配置兼容微信小程序官方写法
* paths 的[相关配置](#参数)均可在项目 package.json 的 entryOptions 中覆盖
* 可通过以下形式的注释指定 `main.js` 特有代码
``` js
console.log('hello world') // app-only
/* app-only-begin */
console.log('happy')
console.log('coding')
/* app-only-end */
```
* 官方模板生成的项目请务必去除以下配置
``` js
// webpack.base.conf.js
module.exports = {
plugins: [
new CopyWebpackPlugin([{
from: '**/*.json',
to: ''
}], {
context: 'src/'
}),
...
]
}
```
* megalo 官方已对打包入口做了类似的优化，如无迁移需求可直接采用[官方方案](https://github.com/kaola-fed/megalo-aot/pull/22)
## Thanks
* [webpack-watched-glob-entries-plugin](https://github.com/Milanzor/webpack-watched-glob-entries-plugin)