通过 circular-dependency-plugin 插件检测存在循环依赖

[chenbin92]

问题

如下配置

const CircularDependencyPlugin = require('circular-dependency-plugin')

module.exports = ({ onGetWebpackConfig }) => {
    onGetWebpackConfig((config) => {
        config.plugin('CircularDependencyPlugin')
          .use(CircularDependencyPlugin, [{
              // exclude detection of files based on a RegExp
              exclude: /node_modules/,
              // include specific files based on a RegExp
              // include: /src/,
              // add errors to webpack instead of warnings
              failOnError: false,
              // allow import cycles that include an asyncronous import,
              // e.g. via import(/* webpackMode: "weak" */ './file.js')
              // allowAsyncCycles: false,
              // set the current working directory for displaying module paths
              cwd: process.cwd(),
          }]);
    });
}

路由使用

import { lazy } from 'ice';
import BasicLayout from '@/layouts/BasicLayout';

import Home from '@/pages/Home';

const routerConfig = [
  {
    path: '/',
    component: BasicLayout,
    children: [
      { path: '/channels', component: Home }
    ],
  },
];
export default routerConfig;

通过 circular-dependency-plugin 插件检测存在循环问题

预期

解决循环依赖问题

[LanceZhu]

问题定位：
plugin-router 中引用 src/routes.ts 文件。
产生循环依赖：src/app.tsx -> .ice/index.ts -> plugin-router -> src/routes.ts -> .ice/index.ts

相关代码：

ice/packages/plugin-router/src/runtime.tsx

Line 2 in 2787cbf

import defaultRoutes from '$ice/routes';

ice/packages/plugin-router/src/index.ts

Line 57 in 2787cbf

TEM_ROUTER_SETS.forEach(i => {

解决方案：

1. 将 routes.ts 提升至 app.tsx
   示例代码：

   // src/app.tsx
   import routes from '$ice/routes';
   
   const appConfig: IAppConfig = {
   	router: {
   +		routes
   	}
   }

2. 路由相关组件，lazy、Link 等与 createApp 分离。

   原有:

   import { createApp, lazy, Link } from 'ice';

   修改后：

   import { createApp } from 'ice';
   
   import { Link } from 'ice/Router';
   import { lazy } from 'ice/lazy';

[LanceZhu]

针对解决方案2：
想法：通过 babel 更换 src/pages/* 及 src/routes 中引入的 路由 相关组件，如 Link, lazy 的原有导入方式。

原有导入：
import { Link } from 'ice';

修改后：
import { Link } from 'ice/routes/index.ts';

实现参考：plugin-store babelPluginReplacePath

[chenbin92]

已处理