请教，根据不同的客户打包不同的文件

[oakland]

同一个项目，需要根据不同的客户打包不同的文件内容，比如样式或者图片。还有一些页面对一些客户是隐藏的，需要在菜单和路由中打包的时候进行隐藏。

我现在的方法是打包的时候，在命令行中添加一个 client 全局变量，然后在具体的组件中对 client 判断，然后引入不同的文件。例如：

import React from 'react';
...
import(client === 'xxx' ? './xxxStyle.scss' : './normalStyle.scss').then(data => styles = data);
let styles = {};

但是总觉得这样把一些逻辑判断混杂在代码中很不舒服，而且未来再有新的客户，又要添加新的判断逻辑。 不知道还有没有更好的方式？

[noe132]

这样 import 真的不会出问题？
webpack 在 import 不是静态字符串的时候，会把项目所有文件都当作一个单独的 module 打包成 chunk 。
如果你的项目有 100 个文件，最后打包出来除了正常打包的 chunk，还会有额外的 100 个 chunk

[randyo]

用 if 判断吧，分开写两个 import，打包后根据 client 的值，有一个分支代码 webpack 会直接帮你删掉

[DamienS]

我公司好像也这么用。不过是 extreact 出来。

写个
const comp = conditional_require('xxxx','someUIComponent.react', 'someOldComponent.react')。

'xxxx'是个 ab testing identifier 。比如'ui_redesign_v2'

[weixiangzhe]

针对多个用户打包为多个文件？
可以用 webpack, 已 react 项目为例

————————
package.json 里加入
```
"build:what_you_wanta": "cross-env DT_BUILD_ENV=what_you_wanta node scripts/build.js",
```


______

[weixiangzhe]

针对多个用户打包为多个文件？
可以用 webpack 的 extensions 处理，类似 react-native 项目，文件有不同的打包后缀. xxx.ios.js xxx.android.js 之类的, 可以自定一下，已 react 项目为例

————————
1. package.json 里加入环境变量与打包配置
```
"build:WHAT_YOU_WANTA": "cross-env USER_ENV=WHAT_YOU_WANTA node scripts/build.js",
```
2. 在`webpack` 下 resolve/extensions 下动态由环境变量加入配置
https://webpack.js.org/configuration/resolve/#resolveextensions
如，我现在用的项目是基于 create-react-app 的，extensions 在`config/paths.js` 下，所以我添加了对应配置为

```js
const dynamicMap = {
user1: ['user1.js','user1.web.js','user1.tsx']
user2: ['user2.js','user2.web.js','user2.tsx']
}

const moduleFileExtensions = [
'web.mjs',
'mjs',
'web.js',
// 在线打包时加入
...dynamicMap[process.env.USER_ENV ] || [],
'js',
'web.ts',
'ts',
'web.tsx',
'tsx',
'json',
'web.jsx',
'jsx',
].filter(i=>!!i)
```
_______
3. 使用
使用时就简单了, 书写时，默认就用 xxx.js,如果是只有 user1 要用的文件，就加一个 xxx.user1.js


```
cd xxx/ && ls
index.user1.js
index.user2.js
index.user3.js
index.js
```