如何修改Babel插件，将JavaScript代码前置到JS文件真正顶部？

问题分析 #

你当前的插件确实能插入代码，但存在两个关键问题导致代码没到“真正顶部”：

1. 仅插入了解析后代码的第一个语句节点，如果要前置多行代码会丢失后续内容；
2. 未处理Babel AST中Program节点的directives属性（比如"use strict"这类指令），以及文件头部注释（如Shebang、版权注释）的位置逻辑。

比如原文件有"use strict"指令时，它属于Program的directives而非body，直接往body里unshift会让插入代码出现在指令之后；如果要前置多行代码，当前写法只会插入第一行。

修改后的插件代码 #

const babel = require("@babel/core");

module.exports = () => {
    return {
        visitor: {
            Program: {
                enter: (path, state) => {
                    const options = state.opts;
                    const file = state.file;

                    if (!options.accept(file.opts.filename)) return;

                    // 解析要前置的所有代码，获取完整语句节点数组
                    const parsedCode = babel.parse(options.prepend);
                    const insertedNodes = parsedCode.program.body;

                    if (!insertedNodes.length) return;

                    const programNode = path.node;

                    // 【可选】将directives（如"use strict"）转为普通语句，插入到前置代码之后
                    // 注意：此操作会让strict mode失效，因为它要求为第一个执行语句，按需启用
                    if (programNode.directives.length) {
                        const directiveStatements = programNode.directives.map(dir => ({
                            type: "ExpressionStatement",
                            expression: {
                                type: "Literal",
                                value: dir.directive,
                                raw: `"${dir.directive}"`
                            }
                        }));
                        insertedNodes.push(...directiveStatements);
                        programNode.directives = [];
                    }

                    // 批量插入所有前置节点到body最开头
                    programNode.body.unshift(...insertedNodes);

                    // 【可选】将原文件头部注释移到前置代码之后（不推荐，注释通常保留在顶部）
                    // if (programNode.leadingComments) {
                    //     insertedNodes[0].trailingComments = [...(insertedNodes[0].trailingComments || []), ...programNode.leadingComments];
                    //     programNode.leadingComments = null;
                    // }
                }
            }
        }
    }
};

关键修改说明 #

1. 支持多行代码前置：
   不再只取解析后代码的第一个节点，而是获取完整的program.body数组，用unshift(...insertedNodes)批量插入，确保所有前置代码都能被添加。

2. 处理Directives（可选）：
   如果你的场景必须把前置代码放在"use strict"这类指令之前，可以启用这段代码——它会把directives转为普通语句，追加到前置代码后面，同时清空原Program的directives。但要注意：这会导致严格模式失效，因为"use strict"必须是代码中第一个执行的语句，按需选择是否启用。

3. 头部注释处理（可选）：
   如果需要把前置代码放在文件头部注释（如Shebang、版权说明）之前，可以启用注释调整代码，但通常不建议这么做——头部注释是文件的说明信息，保留在最顶部更符合常规开发习惯。

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