webpack/babel 转译删除对象键答案

【问题标题】：webpack/babel transpilation removing object keyswebpack/babel 转译删除对象键
【发布时间】：2021-01-12 22:31:04
【问题描述】：

我正在使用 webpack/babel 转译代码，但由于某种原因，第三方包删除了一些代码。

第三方代码在其源代码中定义了一个类似于以下内容的 const：

const NOUNS = {
  people: {
    a: [1, 2],
    b: [3, 4],
  },
  places: {
    a: [5, 6],
    b: [7, 8],
  },
};

该包的 babel 编译步骤使用 runtime-corejs3 最终输出以下内容：

import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';

var NOUNS = {
  people: (
    _people = {},
    /*#__PURE__*/_defineProperty(_people, 'a', [1, 2]),
    /*#__PURE__*/_defineProperty(_people, 'b', [3, 4]),
    _people
  ),
  places: (
    _places = {},
    /*#__PURE__*/_defineProperty(_places, 'a', [5, 6]),
    /*#__PURE__*/_defineProperty(_places, 'b', [7, 8]),
    _places
  ),
};

鉴于_defineProperty 导入似乎委托给Object.defineProperty，目前情况看起来不错。

但是，一旦我在自己的项目上运行 webpack，生成的代码最终看起来更像如下：

pa = {
  people: (zn = {},
    'a',
    1,
    2,
    'b',
    3,
    4,
    zn),
  places: (wn = {},
    'a',
    5,
    6,
    'b',
    7,
    8,
    zn)
}

基本上，_defineProperty 调用已被视为无操作，因为它们现在丢失了，传递给这些调用的参数只是被视为不执行任何操作的单个命令。结果是对象是空的，我基本上是这样结束的：

var NOUNS = {
  people: {},
  places: {},
};

我不清楚我的 babel 转译中是什么导致了这种情况发生。如果需要，很高兴分享更多细节。

【问题讨论】：

标签： javascript webpack babeljs

【解决方案1】：

我想我明白了。该软件包在其构建中包含babel-plugin-annotate-pure-calls，它可能需要排除它。这就是添加 #__PURE__ cmets 的原因，而这又会在我的应用程序的 webpack/babel 转译过程中被删除。

【讨论】：