2017-12-27 29 views
0

私はBabel.jsとJavaScriptコードのスニペットにImportDeclarationを挿入しようとしていた。Babel.jsでASTにimport文を挿入するには?

const babel = require('babel-core') 
 
const t = babel.types 
 
const traverse = babel.traverse 
 
const template = babel.template 
 
const generate = require('babel-generator').default 
 

 
const babylon = require('babylon') 
 

 
const code = [ 
 
    "import A from 'a'", 
 
    "import B from 'b'", 
 
    "export default {", 
 
    " components: {", 
 
    " },", 
 
    " methods: {", 
 
    " init() {", 
 
    " }", 
 
    " }", 
 
    "}" 
 
].join("\n") 
 
console.log(code) 
 
const ast = babylon.parse(code, { 
 
    sourceType: 'module' 
 
}) 
 
var n = [] 
 
traverse(ast, { 
 
    ImportDeclaration: { 
 
    exit(path) { 
 
     n.push(path) 
 
    } 
 
    } 
 
}) 
 

 
const name = 'UserDialog', 
 
    src = './user-dialog.vue' 
 
if (n.length) { 
 
    const importCode = "import " + name + " from '" + src + "'" 
 
    console.log(importCode) 
 
    const importAst = template(importCode, { 
 
    sourceType: 'module' 
 
    })() 
 
    // append to last import statement 
 
    n[n.length - 1].insertAfter(importAst); 
 
    console.log(generate(ast).code) 
 
}

しかし、私は何

enter image description here

次のエラーが発生しましたこれを行う適切な方法は? FYI

: あなたはgit clone https://github.com/aztack/babel-test.git

+0

私はまた、 'exit'メソッドで' path.insertAfter(importAst) 'を試みました。しかし、 'traverse'は無限ループに入ります。なぜなら、私は' ImportDeclaration'を挿入したばかりなので... – aztack

答えて

0

からのコードの上に取得することができますが、例えば、バベルのプラグインとしてこれを書いオフ最善だろう

const babel = require('babel-core'); 

const code = [ 
    "import A from 'a'", 
    "import B from 'b'", 
    "export default {", 
    " components: {", 
    " },", 
    " methods: {", 
    " init() {", 
    " }", 
    " }", 
    "}" 
].join("\n"); 

const result = babel.transform(code, { 
    plugins: [myImportInjector] 
}); 

console.log(result.code); 


function myImportInjector({ types, template }) { 
    const myImport = template(`import UserDialog from "./user-dialog";`, {sourceType: "module"}); 

    return { 
    visitor: { 
     Program(path, state) { 
     const lastImport = path.get("body").filter(p => p.isImportDeclaration()).pop(); 

     if (lastImport) lastImport.insertAfter(myImport()); 
     }, 
    }, 
    }; 
} 
+0

これがありました!ありがとう! – aztack