Question

我正在尝试使用React创建一个组件库，根据构建目标，我需要装饰器函数的2种不同实现。

import { decorator } from 'decorator';
const reactComponent = () => (<p>I am a React component.</p>)
export default decorator(reactComponent);

我想拥有2个构建：1个具有默认的decorator实现，另一个具有不同的实现。

Answer 1

您必须将ENV传递到webpack配置IE：

"bulid:prod": cross-env NODE_ENV=production webpack [...options and parameters]

然后在webpack中

plugins: [
// [...plugins],
new webpack.DefinePlugin({
      process: {
        env: {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
        },
      },
    }),
// [...plugins]
]

然后在您的代码中：

switch(process.env.NODE_ENV) { 
  case "production": { 
     // ...do things
     break; 
  } 
  case "staging": { 
     // ...do things
     break; 
  }
  case "test": { 
     // ...do things 
     break;    
  } 
  default: { 
     console.log("Invalid choice"); 
     break;              
  } 
}

Webpack交换功能在构建时的实现

1 个答案: