javascript - 从 webpack 中剥离动态需求

Question

我有一个类似的代码:

export default {
  something: true,
  mockData: process.env.USE_MOCK && require('./mocks/something.js').default
};

process.env.USE_MOCK 使用 webpack.DefinePlugin 设置为 true 或 false。我使用它来启动我的应用程序，使用 USE_MOCK=true npm run dev 或 npm run dev 来运行或不运行模拟数据。

我希望 Webpack 在构建过程中通过 UglifyJS 的死代码消除来删除这些动态需求，但我注意到它们仍然存在，因此 something.js 将位于构建的包中。

就我而言，输出类似于:

module.exports = {
  something: true,
  mockData: (false) && __webpack_require__(181).default
};

有什么方法可以从 bundle 中完全删除该导入吗？

顺便说一句。我认为这样的方法有效:

let mockData;
if (process.env.USE_MOCK) {
  mockData = require('./mocks/something.js').default;
}
export default {
  something: true,
  mockData
};

不过，我更喜欢内联 require，因为我已经多次遇到过这种模式。

Answer 1

尝试这样的事情:

export default {
  something: true,
  mockData: process.env.USE_MOCK ? require('./mocks/something.js').default : undefined 
};

或者单独构建模块导出:

let module_export;
module_export.something = true;

if (process.env.USE_MOCK) {
  module_export.mockData = require('./mocks/something.js').default;
}

export module_export;