使用 babel，如何将一些代码附加到每个文件的顶部？

Question

我的目标是通过 babel 伪造一些 requirejs 代码。我发现如果我添加以下内容： if (typeof define !== "function") { var define = require("amdefine")(module); } 到每个文件的顶部，而在 nodejs 中运行事情似乎解决了。

这是我写的一些代码，我认为它可以工作或几乎可以工作：

function injectDefine(babel) {
    var header = 'if (typeof define !== "function") { var define = require("amdefine")(module); }';

    return new babel.Plugin('amdefine', {
        visitor: {
            Program: {
                enter: function(path, file) {
                    path.unshiftContainer(
                        'body',
                        babel.types.expressionStatement(
                            babel.types.stringLiteral(header)
                        )
                    );
                },
            },
        },
    });
}

require('babel-core/register')({
    stage: 0,
    plugins: [{transformer: injectDefine}],
});

require('../components/button');

components/button 文件只是我在尝试测试某些文件是否可以加载。

其他注意事项：我使用的是 babel 5，现在无法升级。我现在也不能很容易地使用 .babelrc。

Answer 1

提示 1：如果您对插件进行大量测试，则需要环境变量 BABEL_DISABLE_CACHE=1。如果您有一个您运行喜欢 npm run unit 的脚本，您可能希望在测试您的插件时运行喜欢 BABEL_DISABLE_CACHE=1 npm run unit。

提示 2：babel.parse 将从某些源代码中为您提供完整的程序。您可以做的最简单的事情是 babel.parse(header).program.body[0]。

以下结果有效：

function injectDefine(babel) {

    var header = 'if (typeof define !== "function") { var define = require("amdefine")(module); }';

    return new babel.Plugin('amdefine', {
        visitor: {
            Program: {
                enter: function(node, parent) {
                    node.body.unshift(
                        babel.parse(header).program.body[0]
                    );
                },
            },
        },
    });
}

require('babel-core/register')({
    cache: false,
    stage: 0,
    plugins: [injectDefine],
});

Answer 2

在这个阶段，更简洁的解决方案可以是使用 @babel/traverse 和 @babel/types。

假设您想在每个文件的顶部附加一条注释，您可以使用如下代码：

// Import the required modules
import * as t from "@babel/types";
import traverse from "@babel/traverse";

// Get your ast (for this, you can use @babel/parser)

// Traverse your ast
traverse(ast, {
  // When the current node is the Program node (so the main node)
  Program(path) {
    // Insert at the beginning a string "Hello World" --> not valid JS code
    path.unshiftContainer('body', t.stringLiteral("Hello World"));
  }
});

使用 babel，如何将一些代码附加到每个文件的顶部？

Using babel, how can I append some code to the top of every file?

javascript

transpiler

babeljs