@lx-frontend/modularize

1.0.5 • Public • Published

modularize

为多模块大型项目提供模块化注册方案。

Usage

|--- package.json
|--- README.md
|--- src
| |--- main.js
| |--- App.vue
| |--- router
| | |--- index.js
| |--- vuex
| | |--- index.js
| |--- ajax
| | |--- index.js
| |--- modules
| | |--- index.vue
| | |--- module1
| | | |--- page 1...n
| | | |--- configs
| | | | |--- ajax.js
| | | | |--- router.js
| | | | |--- store.js
| | | | |--- service.js
| | |--- module2
| | | |--- page 1...n
| | | |--- configs
| | | | |--- ajax.js
| | | | |--- router.js
| | | | |--- store.js
| | | | |--- service.js

如上,是一个项目的目录结构,其中,modules是放置模块的文件夹,module1,module2是两个模块。

模块下,page是模块的页面文件,configs下是模块的相关配置。其中service仅仅是引入了ajax、router和store的配置,然后直接导出。(每个模块都可以当做一个单独的服务,故取名service)

假设,module1将作为同步模块注册,即app初始化完成之后立即注册。module2作为异步模块注册,即,只有当路由导航到该模块时,再加载模块注册。请看以下使用方式:

// main.js
import router from './router'
import store from './vuex'
import ajax from './ajax'
import Modularize from 'modularize'

// 引入同步模块
import module1 from './modules/module1/configs/service'
// 同步模块集合
const basicModulesMap = { module1 }

// 异步模块集合
const asyncModules = {
  module2: () => import('./modules/module2/configs/service'),
}

// 设置路由守卫,模块注册在路由的beforeEach全局守卫中实现
Modularize.setRouterBeforeEachGuard(router);
// 注册插件,为vue实例提供注册模块使用的函数registerModule
Vue.use(Modularize);

// 实例化
const modules = new Modularize({
  basicModules: basicModulesMap,
  asyncModules: asyncModulesMap,
});

new Vue({
  router,
  store,
  ajax,
  modules, // 作为应有实例化的参数传入
  render: h => h(App),
}).$mount('#app');

注意事项:

模块名称的设置很重要,名称设置不当,可能会导致模块注册失败。

该安装包是通过获取导航路径的第一个字符串,并以该字符串为模块名称,查找模块集合中对应的模块,然后注册。

比如:假设导航目标为/profile/index,则profile将作为模块名称在模块集合中查找。

所以,在如下的配置中,module1和module2的名称非常重要,一定要和导航路由的第一个字符串对应。建议使用模块的文件夹名称,并保持一致。

// 引入同步模块
const basicModulesMap = { module1 }
// 异步模块集合
const asyncModules = {
  module2: () => import('./modules/module2/configs/service'),
}

配合loader使用

在以上的使用方式中,模块目录的结构并不是强制要求的,只要最终能够正确设置Modularize包的参数即可正常工作。

为了在模块的目录结构上进一步约束,同时也进一步方便Modularize的使用,安装包配套提供了一个loader。

具体使用方式请参阅loader的文档。

Readme

Keywords

none

Package Sidebar

Install

npm i @lx-frontend/modularize

Weekly Downloads

3

Version

1.0.5

License

ISC

Unpacked Size

8.37 kB

Total Files

9

Last publish

Collaborators

  • liuzihao0413
  • ruqimobile
  • haiyulu
  • erica.liuyj
  • pok.h
  • chenzian
  • azumia
  • jeely
  • lichao.franklee
  • mind29
  • yuki.liu
  • lixinleon
  • frontbot
  • owen.huang
  • tiny.tu
  • simba.wang