The Full JavaScript & ES6 Course Notes : Setting up an ES6 Development Environment


Not all browsers currently have full support of the new ES6 features. This brings us to why we need tools like Babel and Webpack in order to create a development environment.

You might have already heard of coffee scripts and typescript. They make coding in javascript a little easier by taking the original JS and allowing us to write functions in a much shorter syntax.

So rather than the user loading multiple JS libraries into HTML, we just have one bundled JS file that has all of our ES6 code in it. This reduces a lot of time spent loading resources. It can even prevent errors where some code in a JS library relies on another one being loaded but it hasn’t yet.

Secondly it comes at the dev server. In other words, all we have to do is write one line in our code and then we have a whole local development scheme that gets live.

Set up a web pack


mkdir es6 (創建一個 es6 file)

cd es6 (到 es6 file)

npm init -y

NPM init dash y allows us to skip the interactive questions that we usually get with the NPM. The result is that we have a packaged adjacent file which provides details about our project.

Right now it only has sections for the name version description and some other things about the project which you can edit later. But soon this will have a section that lists out our projects library dependencies.

So first up we’ll use the NPM i command. And the first one we’re packed at 4.1.0.

npm i webpack@4.12.0 webpack-cli@3.0.3 — save-dev

Now we have a second dependency which is webpack -cli@3.0.3, And then we’ll also pass the save dev option.

Why are we saving these as well ?(Development dependencies and not regular dependencies)

go head use cat package.json

So use the cat command which allows us to print the contents of a file.

So if not for save dev option these will be listed as regular dependencies. If we use the regular save option however we don’t want this behavior since that would mean we would have to conclude these libraries and all of their code within production versions of this codebase.

For the next step let’s go ahead and open up this project with our code editor.

code .

So go ahead and add a source directory which will actually shorten to src.

and create index.js in it

write some code in js file and check its json file

console.log(’hello webpack’);

So package.json have a test script already. Let’s actually remove that and replace it with a start script.(Notice that Jason everything is surrounded by double quotes.)

“start” : “webpack — mode development”,

“build” : “webpack — mode production”


npm run start

So the result of this bundling process is that we now have a new folder within our project. If you type in ls you’ll find that there is a dist which is short for distribution directory in the project.

So we open this with do so within our code editor or find just has one file called manager.

The most important part is that if you scroll to the bottom eventually you’re going to find in the valuation of our console.log.

So at the top webpack is up all the starting javascript code which allows us to eventually evaluate our own individual source slash index. js file with the bundled javascript.

If you run npm run build

The bundled code it’s much shorter and much more condensed because it’s optimized for production where you don’t want to run as many lines as you have to do or too many lines if you don’t have to you rather.