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

前端之家收集整理的这篇文章主要介绍了javascript-关于基于process.env.NODE_ENV的条件导出ES6模块的可能性? 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我写了一个实用程序库,我想在用户发布他们的应用程序时摇晃它们.

在Webpack v4中,您需要使模块ES6能够支持树状摇动,但是我还想将开发构建和生产构建拆分为不同的文件.

我想要的就像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,我将不会摇摇欲坠,我的应用程序将变得如此庞大.

如果将实用程序模块全部导出为ES6静态文件,则必须在生产代码中包含开发消息.

并且发布两个模块(例如:my-utility和my-utility-es)将无济于事,因为在开发中,我的代码如下所示:

import { someFunc } from 'my-utility';

但是在生产代码中,我将不得不将其更改为:

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

我怎么解决这个问题?

更新资料

更清楚地说,我的开发版本和生产版本包含不同的源代码(例如:生产版本去除了所有错误消息).

因此,指定webpack模式对我来说并不令人满意.

最佳答案
我自己找到了答案,我认为最好的方法是通过babel宏:

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

猜你在找的JavaScript相关文章