Babel 插件錯誤：不要將 `path.replaceWith()` 與源字符串一起使用，請使用 `path.replaceWithSourceString()`

Question

編輯/更新：

我接受了 loganfsmyth 的建議並將 babel 作為 sveltify function 的第一個參數，並且我可以訪問/控制台日志 babel.template.statement.ast 但是，如果我嘗試調用 function 我的應用程序將無限期掛起。

詳細信息：

我正在嘗試將它與 svelte 一起使用來替換導入語句，並且我有一個插件：

const sveltify = (babel) => ({
  visitor: {
    ImportDeclaration(path){
      // import x from 'svelte/somewhere'
      if (path.node.source.value.startsWith("svelte/")) {
        const specifiers = path.node.specifiers.map(s => ` ${s.local.name}` );
        const importee = path.node.source.value.replace('/', '.');

        // this line works without babel.template.statement.ast but gives the error in the question title
        // adding babel.template.statement.ast causes the app to hang indefinitely 
        const importNode = babel.template.statement.ast`const {${specifiers} } = ${importee};`;

        path.replaceWith(importNode);
      }
    }
  }
});

和我的通天塔選項：

const SVELTE_OPTIONS = {
  presets: [
    // [
    //   Babel.availablePresets['env'],
    //   {
    //     useBuiltIns: 'usage',
    //     corejs: 3,
    //   }
    // ],
    ['es2017', { 'modules': false }],
  ],
  plugins: [
    sveltify,
    'transform-modules-commonjs',
    'transform-destructuring',
    'proposal-object-rest-spread',
  ],
};

最后，我稍后在我的代碼中使用它來調用轉換，如下所示：

// simplified
function transpile(moduleCode) {
  const { code } = Babel.transform(moduleCode, SVELTE_OPTIONS);
  return code;
}

Answer 1

您鏈接的另一個問題是將babel從插件的第一個參數中拉出，您應該這樣做，所以

const sveltify = () => ({

應該

const sveltify = (babel) => ({

然后你可以使用babel.template中的 babel.template。

Answer 2

我認為問題在於我調用 ast 的方式。 以下作品：

const sveltify = (babel) => ({
  visitor: {
    ImportDeclaration(path){
      // import x from 'svelte/somewhere'
      if (path.node.source.value.startsWith("svelte/")) {
        const specifiers = path.node.specifiers.map(s => ` ${s.local.name}` );
        const importee = path.node.source.value.replace('/', '.');
        const tmpNode = `const {${specifiers} } = ${importee};`;
        const importNode = babel.template.statement.ast(tmpNode);

        path.replaceWith(importNode);
      }
    }
  }
});