Возможность условного экспорта модуля ES6 на основе process.env.NODE_ENV?

Question

Я написал служебную библиотеку и хочу tree-shaking их, когда мой пользователь publishes их приложение.

В Webpack v4 вам нужно сделать так, чтобы ваш модуль ES6 поддерживал tree-shaking, но я также хочу разделить мои development build и production build на разные файлы.

То, что я хочу, точно так же, как модуль NPM реакции:

// index.js
'use strict';

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

Это вызывает у меня вопросы.

Если я сделаю все свои служебные модули commonjs, я никогда не получу tree-shaking, мое приложение станет таким огромным.

Если я сделаю все свои служебные модули ES6 static export, мне нужно будет включить development message в production code.

И публикация двух модулей (например: my-utility и my-utility-es) не поможет, потому что в процессе разработки мой код выглядит так:

import { someFunc } from 'my-utility';

но в рабочем коде мне придется изменить его на:

import { someFunc } from 'my-utility-es';

Как я могу решить эту проблему?

Обновление

Чтобы быть более понятным, мои development build и production build содержат различный исходный код (например: производственная сборка удалила все сообщения об ошибках) .

Так что укажите, что режим webpack мне не подходит.

Answer 1

Я нашел ответ сам, думаю, лучший способ сделать это через babel macros:

import { something } from 'myLibrary/macro';

// In webpack development:
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
// import { something } from 'myLibrary/development';

// In webpack production:
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
// import { something } from 'myLibrary/production';

Моя реализация макроса:

import { createMacro } from 'babel-plugin-macros';

function macro({ references, state, babel }) {
  state.file.path.node.body.forEach(node => {
    if (node.type === 'ImportDeclaration') {
      if (node.source.value.includes('myLibrary/macro')) {
        if (process.env.NODE_ENV === 'production') {
          node.source.value = 'myLibrary/module/production';
        } else {
          node.source.value = 'myLibrary/module/development';
        }
      }
    }
  });

  return { keepImports: true };
}

export default createMacro(macro);

Answer 2

Все, что вам нужно для решения этой проблемы - это использовать mode. См. Укажите режим .

Начиная с webpack v4, при задании режима автоматически настраивается DefinePlugin для вас:

webpack.prod.js

  const merge = require('webpack-merge');
  const common = require('./webpack.common.js');

  module.exports = merge(common, {
    mode: 'production',
  });

Они упоминают React по имени:

Если вы используете библиотеку, подобную реагирующему, вы действительно должны увидеть значительное уменьшение размера пакета после добавления этого плагина.