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

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

0 голосов
/ 19 июня 2020

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

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

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

1 Ответ

0 голосов
/ 19 июня 2020

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

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

Sapper 

// rollup.config.js

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

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

Ваш NPM Модуль

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

// 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'
        }
    }
];

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

// package.json

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

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

...