Реализация функции свопинга в Webpack во время сборки

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]

тогда в пачке

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;              
  } 
}