如何在 Sapper 中使用 Rollup 为服务器和客户端导入不同的包？

Question

我正在创建一个工具，它可以启动服务器并从服务器获取内容并将其显示在浏览器中。我正在尝试将它与前端框架集成。 Sapper/Svelte 就是其中之一。问题是我的包包含对浏览器不需要的内置模块的导入，也没有被浏览器解析，这反过来会引发错误。

我认为我需要做的是使我的工具同构并将我的工具分成两个包。一种用于服务器（server.js），另一种用于浏览器（client.js），其中不包含对内置模块的导入。我很清楚如何拆分代码，在 Rollup 中使用代码拆分，但我不知道如何告诉 Sapper 使用 server.js 作为服务器和 client.js 为客户端。

如何捆绑我的模块，以便当它被其他应用程序使用时，它知道哪个用于服务器，哪个用于浏览器？这是我可以在我的模块中做的事情，还是我必须在它正在使用的框架中配置它？

Answer 1

我发现@rollup/plugin-node-resolve 有一个标志来指示 Rollup 使用在模块的 package.json 的 browser 属性中指定的替代包。

由于 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。