Lerna和Webpack别名问题

zc0qhyus  于 2022-11-13  发布在  Webpack
关注(0)|答案(1)|浏览(178)

假设有两个项目(例如my-app和my-ui)使用webpack别名将'components'解析为'./src/components'。我使用Lerna本地“链接”这个项目并简化开发,my-ui是my-app的依赖项(在它的package.json中设置),并像这样导入:

我的应用程序

/源代码/main. js:

import UI from 'my-ui';

我的用户界面

/src/main.js

import Button from 'components/button';
export default Button;

/src/components/button/main.js

export default class Button...

当MyApp启动时,MyUI尝试解析“MyApp/src/components/”中的按钮,而不是“MyApp/node_modules/my-ui/src/components”或“MyApp/node_modules/my-ui/lib/app.js"中的按钮。我不知道如何解决此问题!
我的Webpack配置中的resolve部分:

resolve: {
  mainFiles: ['index', 'main'],
  extensions: ['.js', '.jsx'],
  alias: {
    lib: helpers.getPath('src/lib/'),
    components: helpers.getPath('src/components/'),
  },
  modules: [
    helpers.getPath('src'),
    helpers.getPath('node_modules'),
  ],
},

其中getPath方法为:

const path = require('path');
const projectPath = path.resolve(__dirname, '..');
const getPath = path.join.bind(path, projectPath);
nbewdwxp

nbewdwxp1#

将webpack加载程序添加到“更改MyUI别名路径”。

module.exports = function(content) {
  let prefix = "MyUI/";
  if (this.context.includes("/src") && this.context.includes(prefix)) {
    let relativePath = this.context
      .slice(this.context.indexOf(prefix))
      .replace(prefix, "");
    let pkgName = `${prefix}${relativePath.slice(
      0,
      relativePath.indexOf("/")
    )}`;
    content = content.replace(/@\//g, `${pkgName}/src/`);
  }
  return content;
};

相关问题