我写了一个实用程序库,我想在用户发布他们的应用程序时摇晃它们.
在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宏：
原文链接：https://www.f2er.com/js/531232.htmlimport { 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);
