无法解析用于nextjs项目的兄弟文件夹中的别名

Question

背景

在我的项目中，我使用lerna js来管理monorepo文件夹结构和安装过程。文件夹结构很简单，我们有两个名为web和common的软件包。

package.json
lerna.json
packages
    common
        package.json
    web
        package.json
        next.config.js
        .babelrc

问题

为了避免每次在dist包中进行开发时都构建common版本，我向用于编译{{1 }}代码。完美无缺。

但是问题是，当我想为从include导入的代码添加别名时，它在编译时不适用。我需要实现的代码要求添加此别名才能使其正常工作（react-native-web-maps）。

一些可能相关的问题

• Babel 7 ignores files outside of project directory
• Plugin don't resolve aliases out side working directory
• Webpack with babel-loader don't process js files from sibling directories
• Config: Rule test should respect module alias

尝试过的解决方案

我已经尝试了整整一整天才能使其正常工作，但到目前为止没有成功。以下是到目前为止我尝试过的事情：

• 使用next-transpile-modules plugin和next-plugin-custom-babel-config将js添加到根中
• 在common中将babel.config.js添加到alias的webpack配置中，但不能从next.config.js导入文件
• 纠缠web和common（我对如何正确使用它们没有真正的了解）

代码段

root（rootMode的webpack选项）

next.config.js

next.js

const path = require("path");
const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");

const aliases = {
    common: path.join(__dirname, "../common/"),
    "react-native": "react-native-web",
    "react-native-maps": "react-native-web-maps"
};

const includePaths = [path.resolve(__dirname, "../common/")];

const nextConfig = {
    webpack: (config) => {
        // Add aliases
        config.resolve.alias = {
            ...(config.resolve.alias || {}),
            ...aliases
        };

        // Also transpile files from common/...
        config.module.rules = config.module.rules.map((rule) => {
            rule.include = [...(rule.include || []), ...includePaths];
            return rule;
        });

        return config;
    }
};

module.exports = withPlugins([withImages], nextConfig);

.babelrc

{
    "presets": ["next/babel"],
    "plugins": [
        [
            "module-resolver",
            {
                "root": ["./", "./../common/"],
                "alias": {
                    "react-native": "react-native-web",
                    "react-native-maps": "react-native-web-maps",
                    "common": "./../common/src/"
                }
            }
        ]
    ]
}

Answer 1

我认为您必须将带有别名的common软件包构建到packages/common/dist文件夹中，然后告诉web软件包从构建模块中读取而不是从{{ 1}}的来源。像对待模块一样对待它。这是一个额外的步骤，但我担心这是唯一的解决方案。我猜想mono-repo / lerna架构的优缺点。

我的意思是内心共同点：

common

1）

设置您的lerna.json packages/ common/ dist/ package.json webpack.config.js .babelrc web/ package.json next.config.js .babelrc 以映射别名。这确实意味着您必须在monorepo中管理2个别名。但是它们是2个单独的程序包，具有2个单独的配置，因此以这种方式进行DRY并没有任何意义。

packages/common/webpack.config.js

2）

使用此webpack配置将// packages/common/webpack.config.js { ... resolve: { alias: { "react-native": "react-native-web", "react-native-maps": "react-native-web-maps" } } ... } 软件包构建到common中。如果您不想将packages/common/dist检查到源代码管理中，则可能必须在每个部署上都构建它。

3）

在packages/common/dist中，从具有正确别名的这个新构建的包中读取内容：

packages/web/next.config.js