Can VueJS lovers understand how really VueJS works behind the scene [Part-1]

Hello to you VueJS lovers

Context:

I wanted to help on VueJS project and tried to help on some issue but was so frustrated because I had no realknowledge on the technical background.

So i decided to start this serie and maybe it will help someone to understand what's going on behind VueJS. And maybe you will help me accelerate my travel.

Installation

Start by forking or cloning vue project

  git clone https://github.com/vuejs/vue

  cd vue

  yarn

Why yarn ?

Actually there is a yarn.lock that's why 😄

Development Environment

At this point i will try to understand the development environment.

First i will focus on the package.json to understand how to start the dev environment.

Dont be scare ! We will go step by step.

First focus on files.

The files key is here to tell to npm which array of files it should explicitely add to the npm package.

If you want to do the reverse. You should use .npmignore.

So here we will take a look about types and src

--------- TYPES ---------

Actually VueJS is using flow types and typescript. I will not tell more about it because I dont need for now more informations about the typing configuration. But what I know is vue 3 will normally only use typescript and function base component instead of classes for easier types inference

check the RFC

--------- SRC ---------

As we will speak just after about src just keep in mind it's the source code.

--------- CONFIGS ---------

Basically we will for now just focus on

yarn run dev

We can see too

  yarn run dev:cjs

  # and

  yarn run dev:esm

As i can't actually explain all specifics differences between them i will have to do more researches for the next articles on it.

So yarn run dev will start scripts/config.js with TARGET:web-full-dev

Yeah i know config.js is pretty heavy but don`t give up now we are near the end of the first article !

CTRL + F on web-full-dev and you will see this:

• entry: for the first file we will start to play with !
• dest: vuejs runtime with compiler unminify (Actually I can't explain really what is exactly the runtime and the compiler but trust me at the end of this series we will !)
• format: umd (universal module definition. I know things about it but as esm and cjs give me time to write a complete article on it (If you know one tell me in comments 😄).
• env: development (thanks sherlock !)
• alias: In vuejs src files you will see things like this import config from 'core/config' What I know is using VueJS rollup-plugin-alias

It permit you to use 'core/config' instead of writing '../../../'. I am not really sure where in the config this is happening but it is here. (If you can well explain tell me in comments and i will update this part)

• banner: is just versionning log

So COOL !! Now we know what will happen :party:

But wait you explain to me the configs but me i want to develop.

--------- RUN DEV ---------

Ok just run yarn run dev

It will generate vue.js (runtime + compiler) in dist/ folder.

The command watch for changes and update files if you change a file in src.

--------- USE EXAMPLES ---------

So now you have the dev command running.

Take a look on examples folder. You will have a lot of examples but i will choose for the best the todomvc folder.

Install http-server or others globally.

npm i -g http-server

And run it on root project folder !

http-server .

Why on root folder ? because you have relative import in index.html

open in browser http://localhost:8080/examples/todomvc/index.html

And Voila the project is running but not with the vue.js we are building.

Go to index.html and change

<script src="../../dist/vue.min.js"></script>

by

<script src="../../dist/vue.js"></script>

As we saw before we are not building the minify version.

Reload the page and now the project is working with the good js file.

To test if it's actually working go to src\platforms\web\entry-runtime-with-compiler.js and add some console.log just after imports

l.12 console.log("asdjasdkjlajsdlkadls");

Ctrl + Shift + R in the browser for hard reload and delete cache or Ctrl + R if you tick disable cache in chrome browser.

You should see the log in the console ! You are now ready to help on VueJS project. Yeah that was a lot of informations but i hope you still here !

Conclusion:

At the end I have two questions i have to answer:

• Have a clear understanding Specific differences between cjs, esm, umd (important).
• Have a clear understanding of the alias config on scripts/config.js (medium/low).

Feel free to help me in comments 😄.

I hope you will like the series I will try to write an article every two weeks.

I am waiting for you comments now ! See you for the next article.