Question

请检查出波纹管。我很困惑，我希望获得相同的输出，但是没有括号和,。知道我在做什么错吗？

https://astexplorer.net/#/gist/7f499680fcd4aaaba9af215afe42de80/c91228b082de80ef2c57e9c1960b22f884d1e694

例如

Babel插件：

export default function (babel) {
  const { types: t } = babel;

  return {
    name: "ast-transform", // not required
    visitor: {
      JSXElement(path) {
        if (path.node.openingElement.name.name === "defs") {
          path.replaceWithMultiple(
            path.node.children.filter(t.isJSXElement)
          );
        }
      },
    }
  };
}

实际：

<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="72" height="72" fill="white" />
  <path d="M68.81 0H34.23C34.23 4.14003 35.8746 8.11049 38.8021 11.0379C40.2516 12.4875 41.9724 13.6373 43.8663 14.4218C45.7602 15.2062 47.7901 15.61 49.84 15.61H56.21V21.76C56.2127 25.8966 57.8571 29.8629 60.7821 32.7879C63.7071 35.7129 67.6734 37.3574 71.81 37.36V3C71.81 2.20435 71.4939 1.44129 70.9313 0.87868C70.3687 0.31607 69.6057 0 68.81 0V0Z" fill="#2684FF" />
  <path d="M51.7 17.23H17.12C17.1226 21.3666 18.7671 25.3329 21.6921 28.2579C24.617 31.1829 28.5834 32.8273 32.72 32.83H39.09V39C39.0953 43.1366 40.7423 47.1019 43.6691 50.025C46.596 52.9481 50.5634 54.59 54.7 54.59V20.23C54.7 19.4343 54.3839 18.6713 53.8213 18.1087C53.2587 17.5461 52.4956 17.23 51.7 17.23V17.23Z" fill="url(#paint0_linear)" />
  <path d="M34.58 34.45H0C0 38.59 1.64462 42.5605 4.57206 45.4879C7.49951 48.4154 11.47 50.06 15.61 50.06H22V56.21C22.0026 60.3431 23.6443 64.3065 26.565 67.2309C29.4857 70.1553 33.4469 71.8021 37.58 71.81V37.45C37.58 36.6543 37.2639 35.8913 36.7013 35.3287C36.1387 34.7661 35.3757 34.45 34.58 34.45Z" fill="url(#paint1_linear)" />
  (
  <linearGradient id="paint0_linear" x1="53.96" y1="17.29" x2="39.25" y2="32.46" gradientUnits="userSpaceOnUse">
    <stop offset="0.18" stop-color="#0052CC" />
    <stop offset="1" stop-color="#2684FF" />
  </linearGradient>,
  <linearGradient id="paint1_linear" x1="1421.65" y1="1327.85" x2="786.064" y2="1949.52" gradientUnits="userSpaceOnUse">
    <stop offset="0.18" stop-color="#0052CC" />
    <stop offset="1" stop-color="#2684FF" />
  </linearGradient>)

</svg>;

预期：

<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="72" height="72" fill="white" />
  <path d="M68.81 0H34.23C34.23 4.14003 35.8746 8.11049 38.8021 11.0379C40.2516 12.4875 41.9724 13.6373 43.8663 14.4218C45.7602 15.2062 47.7901 15.61 49.84 15.61H56.21V21.76C56.2127 25.8966 57.8571 29.8629 60.7821 32.7879C63.7071 35.7129 67.6734 37.3574 71.81 37.36V3C71.81 2.20435 71.4939 1.44129 70.9313 0.87868C70.3687 0.31607 69.6057 0 68.81 0V0Z" fill="#2684FF" />
  <path d="M51.7 17.23H17.12C17.1226 21.3666 18.7671 25.3329 21.6921 28.2579C24.617 31.1829 28.5834 32.8273 32.72 32.83H39.09V39C39.0953 43.1366 40.7423 47.1019 43.6691 50.025C46.596 52.9481 50.5634 54.59 54.7 54.59V20.23C54.7 19.4343 54.3839 18.6713 53.8213 18.1087C53.2587 17.5461 52.4956 17.23 51.7 17.23V17.23Z" fill="url(#paint0_linear)" />
  <path d="M34.58 34.45H0C0 38.59 1.64462 42.5605 4.57206 45.4879C7.49951 48.4154 11.47 50.06 15.61 50.06H22V56.21C22.0026 60.3431 23.6443 64.3065 26.565 67.2309C29.4857 70.1553 33.4469 71.8021 37.58 71.81V37.45C37.58 36.6543 37.2639 35.8913 36.7013 35.3287C36.1387 34.7661 35.3757 34.45 34.58 34.45Z" fill="url(#paint1_linear)" />
  <linearGradient id="paint0_linear" x1="53.96" y1="17.29" x2="39.25" y2="32.46" gradientUnits="userSpaceOnUse">
    <stop offset="0.18" stop-color="#0052CC" />
    <stop offset="1" stop-color="#2684FF" />
  </linearGradient>
  <linearGradient id="paint1_linear" x1="1421.65" y1="1327.85" x2="786.064" y2="1949.52" gradientUnits="userSpaceOnUse">
    <stop offset="0.18" stop-color="#0052CC" />
    <stop offset="1" stop-color="#2684FF" />
  </linearGradient>
</svg>;

干杯

编辑：我得到的一个想法是使用片段

path.replaceWith(
  t.jsxFragment(
    t.jsxOpeningFragment(),
    t.jsxClosingFragment(),
    path.node.children.filter(t.isJSXElement)
  )
);

结果

<>
  <linearGradient
    id="prefix__paint0_linear"
    x1={53.96}
    y1={17.29}
    x2={39.25}
    y2={32.46}
    gradientUnits="userSpaceOnUse"
  >
    <stop offset={0.18} stopColor="#0052CC" />
    <stop offset={1} stopColor="#2684FF" />
  </linearGradient>
  <linearGradient
    id="prefix__paint1_linear"
    x1={1421.65}
    y1={1327.85}
    x2={786.064}
    y2={1949.52}
    gradientUnits="userSpaceOnUse"
  >
    <stop offset={0.18} stopColor="#0052CC" />
    <stop offset={1} stopColor="#2684FF" />
  </linearGradient>
</>

更好，但不是我想要的全部。

Answer 1

您可以尝试使用replaceInline代替；不会在您的AST资源管理器示例中添加任何括号或逗号。

我的猜测是这是由使用replaceWithMultiple时添加的前导和尾随注释引起的。在此处查看源代码： https://github.com/babel/babel/blob/0345c1bc1ded6af8d66f8605e6fdbeeb9b70c5b3/packages/babel-traverse/src/path/replacement.js#L50

并将其与replaceInline的来源进行比较：

https://github.com/babel/babel/blob/0345c1bc1ded6af8d66f8605e6fdbeeb9b70c5b3/packages/babel-traverse/src/path/replacement.js#L266

Babel的“ replaceWithMultiple”添加了不必要的括号

1 个答案: