1

I have about 300 small- or medium-sized Node apps that my team has produced over the past few years which I'm trying to clean up and organize. Suffice it to say that my cherished assistants have not always meticulously used the --save flag with npm install, so the package.json files often do not reflect all the dependencies. Other times, they include packages that are not actually used because someone DID use --save and then changed his mind about needing that packages.

The apps all use the same filename conventions, so we can at least be thankful for that.

I could write a script that read the source code as a text file, used regex to look for require and import, and got the package names. I can deal with versioning myself. But this seems inelegant and inefficient.

I've noticed when I run webpack on a project that the compiler processes the code, detecting any illegal syntax and, more to the point, any import of a package that is not available because it wasn't installed.

Normally I'd chafe at the process of executing an unknown script, but since these are all scripts written by known entities, I'm not worried about malfeasance. I'm mainly unclear how it is that a program like webpack parses a .js file without necessarily executing it, and returns specific errors with line numbers.

I don't even necessarily need to automate the process of adding missing dependencies to the package.json file--many of the 300 apps are properly built. But it would still save me eons to quickly detect what's missing.

Does running a script to see if it works involve a VM? Or is it as simple as running the script from another script? Naturally, the apps themselves aren't packages, so just trying to require them wouldn't seem to work. Maybe it uses JSLint?

1 Answer 1

1

Webpack does not run any scripts that run your code to make sure it is working. It uses Babel, which is a transpiler (which also does not run your code).

The way compilers work is they scan through your code and make sure that everything is syntactically correct, such as matching parentheses or braces, whether a variable you use has been declared, and in statically typed languages, whether your types are correct. While/after they do this, they spit out code that the target system can use. In the case of C, a compiler takes your C code and turns it into machine code or assembly, depending on the options you specify.

The difference between a compiler and transpiler, generally, is that compilers translate the code downwards (towards the machine level) and transpilers translate the code horizontally. Think Typescript -> Javascript, or in this case, ES6+ Javascript -> ES[compatible] Javascript. This means that in order for Babel to convert your ES6 code to something more compatible, it has to read through all of your files and perform basic integrity checks. Specifically, if it sees you importing code, it's going to try and access the module/files because that's what the instruction is. If it can't, then it'll throw an error.

This is also why you'll see compilation errors but not runtime errors, similar to other languages. If Babel were to actually run your code to check for errors, it could also find runtime errors. However, code has many branches of execution, so to find these and then also set the conditions to make them execute is a titanic task. This is why we have testing tools.


To more directly address your questions/concerns:

Does running a script to see if it works involve a VM?

Nope

Or is it as simple as running the script from another script?

Nope

I'm mainly unclear how it is that a program like webpack parses a .js file without necessarily executing it, and returns specific errors with line numbers.

It uses Babel, and

But this seems inelegant and inefficient.

unfortunately, this is essentially what Babel does.


Note

I double checked the Webpack docs, and see that they do have their own transpiler, but it only handles import/export statements, and recommend using another transpiler like Babel or Bublé to transpile the rest, which is what I mean when I refer to how Webpack uses Babel.

See getting started.

Sign up to request clarification or add additional context in comments.

1 Comment

This is so elegantly explained -- thank you! I really appreciate the hand-holding.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.