@lx-frontend/modularize-loader

modularize-loader

Modularize库的配套loader，用以约束项目组织结构，简化Modularize包的使用。

install

npm install -D modularize-loader

Usage

{
  module: {
    rules: [
      {
        // test是固定写法，不可修改
        test: /[\//]placeholder_module_config[\//](basic|async)\.js$/,
        use: [
          {
            loader: 'modularize-loader',
            options: {
              // 模块文件夹路径，必须是绝对路径。
              moduleDir: path.resolve(__dirname, './src/modules'),
              // 基础模块名称列表，即在模块目录之下，模块文件夹的名称。
              // 除basicModules以外，且不在excludes列表中的其他模块，都将以异步加载的形式打包。
              basicModules: ['module1'],
              excludes: ['module2'], // 排除模块，即，这些模块将不会被打包
              only: ['module3', 'module4'], // 仅仅打包only包含的模块（basicModules也会被打包）
              // 是否开启一些警告信息，可以根据开发或生产环境进行相应配置。
              showWarning: true,
            },
          },
        ],
      },
    ],
  },
}

// main.js
// 除模块实例化之外，其他用法保持不变

// ...

// Modularize不再需要传递asyncModules和basicModule
// 免去了在代码中引入模块，构建模块集合的工作。
const modules = new Modularize();

// ...

目录结构要求

|--- [modules]
| |--- 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），文件夹的名称可以自定义。

目录下，一个文件夹代表一个模块，不能有非模块的文件夹（可以有非模块的文件）。

模块中，模块必须从configs/service.js文件中导出，即service.js将导出该模块的ajax、router和store信息。

注意事项：

模块文件夹名称（如：module1, module2），将作为模块的名称参与模块注册，Modularize使用导航路由的第一个单词作为模块名称在模块集合中查找，所以，请务必保持模块文件夹名称和导航路由第一个单词相同。

比如：假设导航目标为/profile/index，则profile将作为模块名称在模块集合中查找。所以，该模块的文件夹名称也应该是profile。