If you’re new to the Vue ecosystem and frontend development you may not have an appreciation yet for how much power a tool like Vue CLI provides.
In this article, I’ll show you the reasons behind Vue CLI’s creation and take you on a journey through its evolution. This will help you not only appreciate it more but also have a deeper understanding of its possibilities.
When you begin as a JavaScript web app developer you’ll become aware of an important contradiction.
Web apps are meant to run in web browsers, of course, and so to make an app as performant as possible we need to ensure its code is compact and terse.
And to ensure the app is as broadly compatible across browser vendors as possible we try to develop it using the most popular version of JavaScript, not necessarily the newest.
The contradiction is that as the developer of that web app you’d rather make the opposite choices!
Firstly, you want your code to be easy to write and comfortable to read. Such code will almost assuredly not be compact and terse.
You also want to use as many modern JavaScript features as you can since they’re being added to make the language more powerful and easier for you to work with.
This contradiction is behind some of the reasons you’ll end up using Vue CLI on almost all of your new Vue projects.
JavaScript development tools
JavaScript developers have come up with some clever solutions to this contradiction by creating development tools like Babel.
Babel’s job is to transform modern JavaScript code into older JavaScript code to ensure it’s broadly compatible across browsers. It does this by leveraging the fact that often new JavaScript features can be expressed less elegantly as old features.
For example, const was only added to the language recently to provide a variable type that couldn’t be reassigned. While many browsers support it now, you still might not use it in a production app as older browsers would see const as invalid syntax and throw an error.
Babel users, though, can use const in their source code and Babel will “transpile” it into older code by converting each instance of const to the broadly-compatible var and creating a manual check that these vars are not overwritten.
In this way, Babel allows you to write a JavaScript app using many modern features without any regard for whether or not these features are supported in enough browsers.
Babel is just one of several important JavaScript development environment tools. Some of the others include ESLint which ensures your code style is consistent, TypeScript which allows you to write type-safe JavaScript code, and vue-loader which allows us to use the famous single-file component format in development and end up with highly-performant render functions in production.
#vue-cli #vue #vue.js #programming
