Question

我的目标是假装通过babel获取一些requirejs代码。我发现，如果我在nodejs中运行时将以下内容添加到每个文件的顶部：if (typeof define !== "function") { var define = require("amdefine")(module); }似乎可以解决问题。

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

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，如何将一些代码附加到每个文件的顶部？

2 个答案: