Невозможно разрешить псевдоним в папке одного уровня, используя проект nextjs. - PullRequest
Новая
       7

Невозможно разрешить псевдоним в папке одного уровня, используя проект nextjs.

0 голосов
/ 23 сентября 2019

Фон

В моем проекте я использую lerna js для управления структурой папок monorepo и процессом установки.Структура папок проста, у нас есть 2 пакета с именами web и common. 

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

Проблема

Чтобы избежать создания версии dist каждый раз при разработке в пакете common, я добавил свойство include в правило веб-пакета, которое используется дляскомпилировать js код.Это работает отлично и без проблем.

Проблема, однако, в том, что когда я хочу добавить псевдоним к импортированному коду из common, он не применяется при компиляции.Код, который мне нужно реализовать, требует добавления этого псевдонима для работы (react-native-web-maps).

Некоторые проблемы, которые могут быть связаны

Пробные решения

Я несколько дней пытался заставить это работать, но пока безуспешно.Ниже приведены вещи, которые я пробовал до сих пор:

  • Добавление babel.config.js в корень с помощью плагинов next-transpile-modules и next-plugin-custom-babel-config
  • Добавление alias в конфигурацию веб-пакета в next.config.js, работает внутри web, но не для импорта файлов из common
  • Возиться сroot и rootMode (я не понимаю, как правильно их использовать)

Фрагменты кода

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/"
                }
            }
        ]
    ]
}

packages/common/src/component.js

import React from "react";
import { View } from "react-native-web";
import MapView from "react-native-maps";

const Component = ({ coordinates }) => (
    <View>
        <MapView region={{ latitude: coordinates.latitude, longitude: coordinates.longitude }}>
            <MapView.Marker
                coordinate={{
                    latitude: coordinates.latitude,
                    longitude: coordinates.longitude
                }}
            />
        </MapView>
    </View>
);

1 Ответ

0 голосов
/ 23 сентября 2019

Я думаю, вам нужно будет собрать пакет common с псевдонимами в папку packages/common/dist, а затем указать пакету web читать из модуля сборки вместо чтения из источника common.Относитесь к этому как к модулю.Это дополнительный шаг, но я боюсь, что это единственное решение.Плюсы и минусы архитектуры моно-репо / lerna, я думаю ..

То, что я имею в виду, часто встречается: 

lerna.json
packages/
    common/
        dist/
        package.json
        webpack.config.js
        .babelrc
    web/
        package.json
        next.config.js
        .babelrc

1)

Настройка packages/common/webpack.config.js для сопоставления псевдонимов.Это означает, что вы должны управлять двумя псевдонимами в вашем монорепо.Но это два отдельных пакета с двумя отдельными конфигами, поэтому в этом случае DRY не имеет смысла. 

// packages/common/webpack.config.js
{
...
  resolve: {
    alias: {
      "react-native": "react-native-web",
      "react-native-maps": "react-native-web-maps"
    }
  }
...
}

2)

Создайте пакет common с помощью этого веб-пакетаКонфиг в packages/common/dist.Возможно, вам придется создавать его при каждом развертывании, если вы не хотите проверять packages/common/dist в системе управления версиями.

3)

В packages/web/next.config.js, читать из этого недавно созданного пакетакоторый имеет правильные псевдонимы: 

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