how to support vue file? about node-dependency-tree HOT 4 CLOSED

Hi! Thanks for the question. I don't know anything about how vue works or how it differs from any of the supported filetypes. Do you have links to more information on what you'd need that's vue specific? A sample vue repo with the output of a current run of dependency tree would help highlight the files that aren't parsed properly.

Once I better understand what's not working on vue codebases, we can scope what would need to change to support it properly.

Thanks!

from node-dependency-tree.

Thanks for your reply!
Background information: I use node-dependency-tree in vscode-framegraph, a vscode-extension to show dependency tree.

About vue: vue is a font-end frame like react

Simple Project : demo is a simple vue project its dependency is like:

ps: get-dependency-tree is work on vue-project, but is not work very well. maybe this can help you

Thanks Again

from node-dependency-tree.

Thanks for the extra detail! I appreciate it.

I think the hard part here is handling .vue components that have embedded html and css. To get that to work, you need a custom parser to be used on .vue files.

If you know of a well-supported library that can take in a vue file and return a JS AST, then it could be used to extract the imports from a .vue file. You could then possible use the commonjs module resolver to convert those extracted imports into concrete filepaths for recursive traversal.

https://github.com/dependents/node-dependency-tree#how-does-this-work is an attempt at explaining the flow and the main modules at play for finding dependencies and mapping those dependencies to files for traversal. I'd look at the way the typescript support works and see how vue support can map to that.

I don't use TS at all these days and haven't used Vue at all ever, so I can't really provide support myself (it would be naive and buggy, i'm sure). If you have the time and really want it in, I'm happy to answer questions or clarify the design of dependency-tree and its lower level modules. I welcome PRs and appreciate the help.

from node-dependency-tree.

I have fixed this problem. thank you for your explanation about node-dependency-tree, it helps me a lot.

vue-template-es2015-compiler is a loader to get vue string code and parse it's html template,javascript code,css module. if you got the javascript string code of vue file, you can do what you want, maybe JS AST or anything else.

how to parse vue file showed how to parse vue file. maybe this can help you.

Finally, I have fixed this problem. if you have time you can support vue file in node-dependency-tree. maybe this issue can be closed.

Thanks Again

from node-dependency-tree.