如何編寫將輸出傳遞到其他插件的babel js插件？

Question

我正在嘗試編寫一個babel插件，以將內容添加/添加到文件中-例如； 添加以下行console.log("start of " + __filename); 和console.log("end of " + __filename); 到每個文件。

到目前為止，我已經設法編寫了一個完全做到這一點的訪客，但是在插件運行之前或之后，現有的代碼不會被任何其他插件修改。

例如，我有以下文件：

import * as foo from 'foo';
import * as bar from 'bar';

console.dir({ foo, bar });

單獨使用env預設（即沒有我的插件）和選項targets.node: 'current'我最終得到輸出-請注意，es6導入已轉換為commonjs要求：

'use strict';
var _foo = require('foo');
var foo = _interopRequireWildcard(_foo);
var _bar = require('bar');
var bar = _interopRequireWildcard(_bar);
function _interopRequireWildcard(obj) { /* resolve commonjs or es6 module */ }
console.dir({ foo, bar });

但是，一旦我添加了自己的插件； 看來該env預置有利於自己的插件的跳過-但我想這兩個插件應用（我的第一次，最好）。

---

到目前為止，我的插件代碼如下：

module.exports = function wrapModule(babel) {

  const prepend = transform(`console.log("start of " + __filename);`)
  const append = transform(`console.log("end of " + __filename);`)
  return {
    visitor: {
      Program(path, {opts}) {
        path.replaceWith(t.program([...prepend, ...path.node.body, ...append]))
        path.stop()
      }
    }
  }

  function transform(content) {
    return babel.transform(content).ast.program.body
  }
}

而我的.babelrc很簡單：

{
  "presets": [[
    "env", { "targets": { "node": "current" } }
  ]],
  "plugins": [
    "./wrapper-babel-plugin"
  ]
}

這將產生輸出：

console.log("start of " + __filename);
import * as foo from 'foo';
import * as bar from 'bar';

console.dir({ foo, bar });
console.log("end of " + __filename);

誰能建議我缺少將Babel與其他插件鏈接的插件，讓我可以結合使用多個插件嗎？

Answer 1

這將產生輸出：

假設您正在使用eval ，並且正在使用錯誤數量的參數調用您的transform函數，那不可能是真的：)

編寫所需內容的正確方法是

export default function wrapModule({ template }) {
  const prepend = template(`console.log("start of " + __filename);`);
  const append = template(`console.log("end of " + __filename);`);

  return {
    visitor: {
      Program(path, {opts}) {
        path.unshiftContainer("body", prepend());
        path.pushContainer("body", append());
      }
    }
  };
}

通過使用unshiftContainer和pushContainer Babel可以將那些節點排隊，以供其他插件處理。 這也使用template為您的兩個片段生成AST。