具有租户特定捆绑包的多租户 JavaScript 应用程序

Question

我正在研究构建多租户 JS Web 应用程序的方法。我希望能够导入如下文件。

import Thing from './thing'

我想配置 webpack/babel/一个工具 以首先查找特定于租户的文件，即 thing.tenant.js，然后回退到 thing.js。

除了租户之外，react-native 中特定于平台的代码的类似方法将作为构建的一部分提供，并最终得到它自己的包 bundle.tenant.js。

有谁知道这样做的方法吗？

Answer 1

所以我们终于找到了解决方案。我们在配置文件中返回一组 webpack 配置。

使用 webpack 合并，我们将共享配置与特定于租户的配置相结合。我们制作了一种方法来生成这些以使配置更加简洁。

对于每个租户，我们在解析中自定义扩展数组，使其首先查找具有租户扩展名的文件，如下所示。

  {
    resolve: {
      extensions: [`.${tenant}.js`, ".js"]
    }
  }

这意味着当我们的代码像这样导入一个模块时

import Header from './header'

Webpack 会先查找header.{tenant}.js，然后再请求tenant.js。

我们对 sass 导入应用了相同的原则，但是，我们目前是 sass-loader 的分叉版本，以实现与 sass 相同的功能。

module: {
    rules: [
        {
            test: /\.scss$/,

            use: [
                // Loaders omitted for brevity...
                {
                    loader: "sass-loader",
                    options: {
                        sourceMap: true,
                        extensions: [`.${tenant}.scss`, ".scss", ".sass", ".css"],
                    }
                }
            ]
        }
   ]
}

这给了我们所需的 90%。但是构建时间缓慢，因为多个配置意味着多个 webpack 运行。为了缓解这种情况，我们开始使用webpack hard source plugin，这使得构建时间更容易接受。在插件配置中添加了以下配置。

new HardSourceWebpackPlugin({
    configHash: (webpackConfig) => {
            const config = {
                webpackConfig,
                // our custom config merged in here...
            }
            return require('node-object-hash')({
                sort: false
            }).hash(config);
    },
})