@lx-frontend/modularize

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的文档。