The Majesty of Vue.js

Module bundling with Webpack

Module bundlers

Our workflow works fine with current code of sum.js. We will extend its features to calculate the cost of a pizza and a beer and let the client know.

src/sum.js:

const pizza = 10 
const beer = 5 
 
const sum = (a, b) => a + b + '$'; 
console.log('Alex, you have to pay', sum(pizza, beer)) 

This code looks good, but assuming that not everyone is called Alex we'll create a new file, client.js, which will provide the client's name.

src/client.js:

export const name = 'Alex' 

We'll import the name from there.

src/sum.js:

import { name } from './client' 
 
const pizza = 10 
const beer = 5 
 
const sum = (a, b) => a + b + '$'; 
console.log(name, 'you have to pay', sum(pizza, beer)) 

Great! If we run node assets/js/sum.js we get ...