Webpack自定义插件开发：编译时为React组件插入data-attr属性

Great start on your Webpack plugin! You're already correctly targeting your own TSX components and zeroing in on return statements—now let's fix the AST manipulation part to inject that data-attr attribute.

Key Background #

In React's JSX AST structure, a <div> translates to a JSXElement node. Its attributes live in the openingElement.attributes array. We need to create a valid JSXAttribute node and add it to this array (while avoiding duplicates if the attribute already exists).

Updated Plugin Code #

Here's how to modify your existing statement.tap hook to accomplish this:

parser.hooks.statement.tap('ReactAttrGeneratorPlugin', (statement: any) => {
  if (this.isOwnComponent(parser) && statement.type === 'ReturnStatement') {
    // First, verify we're dealing with a JSX element (not null/strings/other expressions)
    if (statement.argument?.type === 'JSXElement') {
      const jsxElement = statement.argument;
      const openingElement = jsxElement.openingElement;

      // 1. Create the `data-attr` attribute nodes using Webpack's AST generator
      const attrName = parser.astGenerator.jsxIdentifier('data-attr');
      // Use a static literal value here; swap for dynamic values if needed
      const attrValue = parser.astGenerator.literal('some data');
      const newAttr = parser.astGenerator.jsxAttribute(attrName, attrValue);

      // 2. Check if the attribute already exists to avoid duplicates
      const hasExistingAttr = openingElement.attributes.some(attr => 
        attr.type === 'JSXAttribute' &&
        attr.name.type === 'JSXIdentifier' &&
        attr.name.name === 'data-attr'
      );

      // 3. Add the new attribute if it doesn't exist
      if (!hasExistingAttr) {
        openingElement.attributes.push(newAttr);
      }
    }
  }
});

Customization Options #

• Dynamic Attribute Values: If you want to inject dynamic data (like the component's file path), use a JSXExpressionContainer instead of a literal:

  // Example: Use the component's resource path as the attribute value
  const dynamicValue = parser.astGenerator.identifier(parser.state.module.resource);
  const attrValue = parser.astGenerator.jsxExpressionContainer(dynamicValue);
  const newAttr = parser.astGenerator.jsxAttribute(attrName, attrValue);
  

  This will generate data-attr={"/path/to/your/component.tsx"}.

• Target Specific Elements: If you only want to target <div> elements (not all JSX tags), add an extra check:

  if (openingElement.name.name === 'div') {
    // Add attribute logic here
  }
  

Why This Works #

We use parser.astGenerator (provided by Webpack's parser) to create valid AST nodes instead of manually building them. This ensures compatibility with Webpack's internal AST handling and avoids subtle bugs from incorrect node structures.

内容的提问来源于stack exchange，提问作者Andrey