PU$]-[KAR's

… Every drop has ability to survive .


Leave a comment

Webpack Basics

Hello,

While using ES6, React.js it’s always recommended to use module bundler like ‘webpack’ so today I would like to share the basics of webpack in simpler manner. There are many of blogs already published on the internet but the main reason to post this blog is to consolidate the things under one roof and also share my personal experience and opinion while using webpack.

Webpack … Does is really required ?

There was a time where it was considered that there is no such need of any tool who takes care of the client side code for moduling, merging, generating builds automatically etc. etc. Because the at that time the code written in JavaScript was not that much vast and evolved as compare to today’s projects.
Day by day javascript is getting evolved. Now the developers are using TypeScripts, ES6 going one step ahead of javascript. SO of course there will be need of transpilers like ‘Babel’ to convert the code in javascript. And the use of javascript itself has been increased tremendously. Modules are being developed by parallel programming is going on with javascript. So there is of course a need of a tool who will take care of merging these files into single one. That’s why the module bundlers like webpack came into picture.

Major activities that can be handled by webpack

As discussed above module bundlers are the tools who take care about the all client side code. So we will just go through the important roles which webpack can perform to mange the client side code.

  • Combine the developed code at one place: Just discussed above in the world of parallel programming webpack takes care of combining all the modules that are created in different files to single file
  • Resolving dependency: Wile combing the files to one file webpack takes care of resolving the inter module dependency. That means if ‘student’ module dependent on module called ‘person’ in that case webpack will take care of having all the code of module ‘person’ will be present before executing the code for module ‘student’. We don’t have to care about the dependency. Webpack will do the job for our self.
  • Reduce the file size: Reducing the size of file is very important when the code goes on the production. Removing of just white space also makes a lot of different in file size and hence it will improves the performance as well. So webpack takes care of such things like removing white space, minification etc. So this things helps us to enhance the performance of application.
  • Transpilation:webpack alos supports the transpilers like Babel or any other too.

Getting started with webpack

To install webpack we can use simply node packet manger with following command npm install webpack –g

Now, to understand the the configuration of webpack we will consider that we have been added ‘webpack.config’ file at root folder (in project structure) with following configuration.
module.exports = {
entry: "./app/component/main.js",
output:{
filename:"public/bundle.js"
},
Watch: true,
module:{
loaders:[{
test:/\.jsx?$/,
exclude:/(node_modules)/,
loader:'babel'
}
]
},
resolve: {
extensions : [‘’,’.js’,’.myExtension’]}}

To begin with module.exports, this is the object that’s actually returned as the result of a require call.

entry: Key ‘entry’ refers the file along with its path in which we have written a code. Even we can give multiple files using array notation as well.

filename: Inside output, filename denotes the single file in which all code (which we have written in different files) is going to be get combined and will be consumed by the browser to run the file.

These are the basic configuration which we need to run the application using webpack.

To run the application there is no need to install any different webserver. We can use the webserver provided by webpack itself.
The command Npm insall webpack-dev-server –g will install the webserver.

No we can run our application with command ‘$webpack-dev-server’.
But this will contain default bar in browser so to avoid this bar we can use command ‘$webpack-dev-server- -inline’

watch: To rerun the application every time whenever we make a small change in file is a tedious job. So if we set ‘watch’ to true, This will take care of rerun the application on every change.

Now we will look at the loader section. Till this point we were looking to run application with simple javascript files but as we are using react.js, ES6 we have to provide transpiler details in loader section so that files using ES6 etc. will get transpiled into javascript file.

test: This will takes care to run the test file as we are going to specify for this key. We can specify our own custom names or path to make repository of test files too.

exclude: As name suggested this will exclude the files, currently we have set this to exclude files from node_modules folder.

loader: Currently This we have set to ‘Babel’ transpiler.

resolve: This is a section which specify what are the file types that we can process without giving the specific extension. The list of extension can be given in array including any custom extension as well.
By default webpack will process files with ‘js’ extension.

We can add preorders such as jsHint for linting errors by adding key preloader in webpack.config file.

That’s all folks !!!

Advertisements


2 Comments

Integration of ‘Jasmine’ with ‘Webstorm’

Hey guys,

It’s time to have some hands-on with unit testing !!!

Unit testing is one of the key features while developing any application weather it would be a server side code or client side and ‘Jasmine’ is one of the leading framework to test an angularJS application.So today we will walk through integrating ‘Jasmine’ with ‘WebStorm’.Of course, we should have ‘node.js’ installed on our machine that’s the prerequisite thing for this as you know. So basically to run specs(i.e. jasmine tests) we are going to use ‘karma’ as ‘test runner’ & ‘jasmine’ as test framework.

So majorly this integration will fall in two steps:

  1. Initialization of ‘karma’.
  2. Adding ‘jasmine’ intellisense.

Initializing ‘karma ’ with ‘jasmine’ framework.

  • Install ‘karma’ inside webstorm project with command on terminal ‘npm install –g karma’ which installs the ‘karma’ for our application even we might go for installing karma globally using command prompt.
  • To initialize ‘karma’ enter command ‘karma init’ on terminal. This command will initialize the karma and will be followed with certain questions to configure ‘karma.conf.js’. basically this file will be set through the option which we are going to set while initializing ‘karma’.
  • So using this configuration option we can adopt different Test frameworks like ‘Jasmine’, ‘mocha’ etc. so we are going through ‘Jasmine’ configuration. As I said earlier ‘karma ’ is a test runner & ‘Jasmine’ is a test framework.
  • So to configure this we will chose ‘jasmine’ framework. Then ‘no’ to Rquire.js. Then chose the suitable browser say ‘firefox’ then As we want that ‘ webstorm’ has to look after change in any tests so select ‘no’ to the question ‘Do you want Karma to watch all the files and run the tests on change ?’

So this will set our basic configuration.

And now it’s time to add few things in favor of developer’s favor – Intellisense.

‘Jasmine’ framework intellisense:

As with default options ‘webstorm ’ is not going to provide any auto complete facility for jasmine so we do some settings to make it possible. For that we need to add java script library to have that through settings of webstorm and need to include in current project.

To that please follow following steps:

  • In WebStorm, open the Settings dialog (File > Settings).
  • Under language & settings, navigate to JavaScript > Libraries.
  • Click the Download button on the right side. This opens the Download Library dialog.
  • Select “TypeScript community stubs” from the combo box.
  • Find the library ‘jasmine’, select it and click Download and Install.
  • After installing it makes sure that check box should be selected.

And now we are ready to go on writing specs……..

In next post even I will be going to share one easy sample for creating specs.