Как импортировать разные пакеты для сервера и клиента с помощью Rollup в Sapper?

Я создаю инструмент, который запускает сервер, получает контент с сервера и отображает его в браузере. Я пытаюсь интегрировать его с интерфейсными фреймворками. Один из таких фреймворков - Sapper / Svelte. Проблема в том, что мой пакет содержит импорт для встроенных модулей, которые не нужны браузеру, а также не разрешаются браузером, что, в свою очередь, вызывает ошибку.

Я думаю, что мне нужно сделать мой инструмент изоморфным и разделить его на две группы. Один для сервера (server.js) и один для браузера (client.js), который не содержит импорта для встроенных модулей. У меня есть хорошее представление о том, как я могу разделить код, используя разделение кода в Rollup, но я не знаю, как я говорю Sapper использовать server.js для сервера и client.js для клиента.

Как я могу связать свой модуль, чтобы, когда он используется другими приложениями, он знал, какой из них использовать для сервера, а какой - для браузера? Могу ли я это сделать в своем модуле или мне нужно также настроить это в рамках, в которых он используется?


node.js javascript rollupjs sapper isomorphic-javascript
person limitlessloop    schedule 18.06.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я обнаружил, что @rollup/plugin-node-resolve имеет флаг, инструктирующий Rollup использовать альтернативный пакет, указанный в свойстве browser в модуле package.json.

Поскольку Sapper настроен на создание пакета как для client, так и для server, этот флаг уже установлен в rollup.config.js.

Сапер

// rollup.config.js

export default {
    client: {
        // ...
        plugins: [
            // ...
            resolve({
                browser: true, // <-- flag
                dedupe: [ 'svelte' ],
                exclude: [ 'node_modules/**' ]
            })
            // ...

Здесь никаких изменений не требуется.

Ваш модуль NPM

Вам нужно создать две связки. Один для сервера и один для браузера. Я чувствовал, что для этого проще создать две разные точки входа в Rollup. Возможно, можно будет использовать одну и ту же точку входа и использовать условную логику для вывода другого пакета (с чем я не знаком).

// rollup.config.js

export default [
    {
        input: 'src/server.js',
        output: {
            file: 'dist/server.js',
            format: 'cjs'
        }
    },
    {
        input: 'src/browser.js',
        output: {
            file: 'dist/browser.js',
            format: 'cjs'
        }
    }
];

Теперь мы добавляем путь к конкретному пакету браузера в package.json.

// package.json

{
  "main": "dist/server.js"
  // ...
  "browser": "dist/browser.js"
}

Это означает, что при запуске Sapper будет использовать разные пакеты для сервера и клиента. Когда вы создаете отдельные пакеты, вам необходимо структурировать их так, чтобы они работали независимо друг от друга. В моем случае я изолировал все функциональные возможности сервера от специфичного для сервера пакета и исключил все зависимости, такие как http, fs и path, из специфичного для браузера пакета.

person limitlessloop    schedule 19.06.2020