Question

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

import Thing from './thing'

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

反应原生的平台特定代码的类似方法（租户除外）将作为构建的一部分提供，并以自己的包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);
    },
})

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

1 个答案: