@lx-frontend/modularize-loader

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

Usage no npm install needed!

<script type="module">
  import lxFrontendModularizeLoader from 'https://cdn.skypack.dev/@lx-frontend/modularize-loader';
</script>

README

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