2015년 9월 6일 일요일

javascript development environment

We'll see how to setup javascript development and test environment using npm, grunt, karma, jasmine.


1. nodejs

We will not use nodejs directly. But there are many useful tool which operated on nodejs platform. Let's install nodejs first. You can easily install nodejs after downloading binary it.


You can install nodejs for linux(Ubuntu 14.04.02 LTS) like followings,

Download node-install.sh
wget https://github.com/taaem/nodejs-linux-installer/releases/download/v0.3/node-install.sh

Add exe authority 
chmod +x node-install.sh

Execute
./node-install.sh


2. npm and package.json

The npm helps developer to share their code and  to reuse module. Those code called package or module. They are shared by registering npm registry. The npm registry is a kinds of database which contains package information. The package is a module directory. The package.json is in that folder, this fils contains meta information of package. When you create javascript application, you might use those package(module). With npm and package.json, you can easily compose those module and share environment with your colleague.

3. package.json

You can crate package.json using following command. It doesn't matter create it manually. Refer this.


npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (myjavascriptproject) hellojavascript
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Some/Pth/package.json:

{
  "name": "hellojavascript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) yes

4. karma & jasminie

karam is automatic test executor which is made by AngularJS team of google. You can install in following command,

npm install karma --save-dev

We will write test-code using jasmine javascript test framework. Refer the usage of jasmine which i wrote before.

npm install karma-jasmine --save-dev

With --save-dev, all dependent module are updated to package.json automatically. We'll add required module this way. We can execute test-case just using karma itself. But in this post, we will execute karma using grunt.

Let's make karma configuration file.

karma init my.conf.js

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.

> yes

You can define src files and test file to include like [line 17]


5. grunt

Install grunt which is javascript build tool. Grunt is useful for many reasons. Let's install following modules.

install grunt 
npm install grunt --save-dev
npm install grunt-cli --save-dev

grunt-karma plugin
npm install grunt-karma --save-dev

To run test-case in chrom browser, neet to install following plug-in.
npm install karma-chrome-launcher --save-dev

Install addtional plug-ins. jshint display javascirpt grammer warning and errors

npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-watch --save-dev

Grunt configuration
Gruntfile.js is a grunt confugration file. In [line 4], Grunfile.js read package.json. From the next line, configure jshint, watch, karma task. You can run specific task like followings,

grunt [task name]

run karma task.

grunt karma

6. directory structure and package.json

All directory structure which i used like followings,























The node_modules directory don't need to manage by source manage tool(git or svn). Because you can create same directory structure using package.json with npm. When you do build and test using CI tool like jenkins, this is a quite convenient. Let's simply test it. Copy package.json to another directory and execute following command.

npm install

Then npm will install required module after reading package.json



댓글 없음:

댓글 쓰기