javascript - 基于 process.env.NODE_ENV 的条件导出 ES6 模块的可能性？

Question

我写了一个实用程序库，我想在我的用户发布他们的应用程序时对它们进行tree-shaking。

在 Webpack v4 中，你需要让你的模块 ES6 支持 tree-shaking，但我也想拆分我的 development build和我的 production build 到不同的文件中。

我想要的是一模一样的react的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 静态导出，我将必须在生产代码 中包含开发消息。

发布两个模块(例如:my-utility 和 my-utility-es)不会有帮助，因为在开发中，我的代码如下所示:

import { someFunc } from 'my-utility';

但在生产代码中，我必须将其更改为:

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

我该如何解决这个问题？

更新

更清楚地说，我的开发构建和生产构建包含不​​同的源代码(例如:生产构建已去除所有错误消息) .

所以指定 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);