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.
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 😄
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
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
As we will speak just after about src just keep in mind it's the source code.
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.
yarn run dev will start scripts/config.js with
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.
Ok just run
yarn run dev
It will generate vue.js (runtime + compiler) in
The command watch for changes and update files if you change a file in src.
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 !
Why on root folder ? because you have relative import in index.html
open in browser
And Voila the project is running but not with the vue.js we are building.
index.html and change
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
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 !
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
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.