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

Question

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

import Thing from './thing'

我想配置webpack/babel/工具来首先查找特定于租户的文件,即thing.tenant.js然后再回到thing.js.

除了租户之外,react-native中特定于平台的代码的类似方法将作为构建的一部分提供,并以其自己的bundle结束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 硬源插件，这使得构建时间更容易接受。下面的配置被添加到 plugins 配置中。

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