Lerna和webpack别名问题

Question

假设有两个项目（例如 my-app 和 my-ui），使用 webpack 别名将 “components” 解析为“./src/components”。我使用 Lerna 来本地“链接”这些项目并简化开发流程，my-ui 是 my-app 的一个依赖项（在其 package.json 文件中设置），并像下面这样导入： MyApp /src/main.js:

import UI from 'my-ui';

MyUI

/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: {
  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);

- Jerome

---

你能展示一下你的webpack.config.js文件吗？ - Slawa Eremin

我已经更新了我的问题，包括webpack配置文件的一小部分（resolve section）。你需要看另一个部分吗？注意：每个项目都有这个webpack配置。 - Jerome

Answer 1

将Webpack加载器添加到Change 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;
};

- 马兴祥