Webpack을 이용한 angularJS 1 application 개발
기존 grunt를 이용한 angularjs application을 webpack을 사용하도록 변경하고자 합니다. 일단 webpack을 사용하게 되면 다음과 같은 장점을 가질 수 있습니다.
- npm을 이용한 외부 liberary의 관리
- es6 문법의 사용
- import/require의 사용 가능
- nodejs의 server code와 client code의 완벽 호환 가능
위 장점 이외에, 최근의 웹 개발 양상은 module화입니다. 모든 liberary들이 CommonJS 방식으로 module화가 되어가고 있는 시점에서, 추세에 따라가지 못하면 도태가 되어버리는 것 같은 압박감을 느끼기도 하지요.
환경
사용되는 application의 주요 library들은 다음과 같습니다.
- jquerey
- angularjs
- lodash
- restangular
- kendo ui Pro
구조
기본적으로 webpack의 폴더구조는 maven의 구조와 비슷하게 가는 경향들이 있습니다. 다음과 같은 folder구조를 가지고 갈 것입니다.
.
├── dist
├── gulpfile.js
├── libs
│ └── kendo
├── LICENSE
├── node_modules
├── package.json
├── README.md
├── src
│ ├── app
│ └── public
├── webpack.config.js
├── webpack-test.sublime-project
└── webpack-test.sublime-workspace
- dist: build된 file들이 위치할 folder입니다.
- libs: bower/npm이 지원되지 않는 외부 library들이 위치한 folder입니다. 상기 application에서는 kendo가 포함됩니다.
- src: 소스가 위치합니다.
- public: public에 배포될 css, image, html 들이 위치할 folder입니다.
- app: angularJs application이 위치할 folder입니다. app.js를 시작접으로 application이 구동될 것입니다.
여기서 app folder의 경우 다음과 같은 구조로 구성됩니다. (기본적으로 yo angular와 동일한 구성을 가지고 갑니다.)
├── controllers
│ ├── home.js
│ └── user.js
├── directives
│ └── nameButton.js
├── services
│ ├── BaseService.js
│ └── CodeService.js
├── app.js
└── routes.js
사용자 directive, controller, service를 모두 사용합니다.
packages.js
webpack은 기본적으로 bower를 사용하지 않습니다. 모든 js library들은 npm을 통해 설치되며 관리됩니다.
basic angularJS application (STEP01)
가장 기본적인 angularjs application을 작성해보도록 합니다. 다음과 같은 특징을 갖습니다.
/home,/user라는 두개의 route를 갖습니다.
추후에 npm을 이용해서 module을 관리할 예정이기 때문에 처음 시작은 모두 cdn을 이용해서 처리하도록 합니다.
public안에 다음과 같이 구성합니다.
├── js
│ ├── controllers
│ │ ├── home.js
│ │ └── user.js
│ └── app.js
├── home.html
├── index.html
└── user.html
그리고, /home, /user의 url router를 다음과 같이 구성합니다.
// app.js
'use strict';
angular
.module('app', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeController'
})
.state('user', {
url: '/user',
templateUrl: 'user.html',
controller: 'UserController'
});
});
index.html
<!doctype html>
<html ng-app="app" lang="en">
<head>
<meta charset="UTF-8">
<title>Angular App</title>
</head>
<body>
<button ui-sref="home">Home</button>
<button ui-sref="user">User</button>
<ui-view></ui-view>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.4/angular-ui-router.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/controllers/home.js"></script>
<script src="/js/controllers/user.js"></script>
</html>
home.html
<p>this is home.html</p>
user.html
<p>This is user.html</p>
이제 public folder내에서 http-server를 실행해보면 간단한 angularjs webapp 이 생성됩니다.
basic angularJS application + webpack (STEP02)
이제 webpack을 이용해서 angularjs application을 구성해보도록 하겠습니다.
먼저, public/js 안에 있는 모든 js 파일들을 모두 app folder로 옮깁니다.
.
├── app
│ ├── controllers
│ │ ├── home.js
│ │ └── user.js
│ └── app.js
└── public
├── home.html
├── index.html
└── user.html
이런 구성을 가지게 됩니다.
이제 webpack.config.js 파일을 생성합니다.
'use strict';
const config = {
entry: './src/app/app.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
plugins: []
};
module.exports = config;
매우 기초적인 config 파일입니다. app.js 파일을 entry point로 지정하고, compile된 folder를 지정합니다. 이제 bundle된 파일을 사용하도록 index.html을 다음과 같이 수정합니다.
<!doctype html>
<html ng-app="app" lang="en">
<head>
<meta charset="UTF-8">
<title>Angular App</title>
</head>
<body>
<button ui-sref="home">Home</button>
<button ui-sref="user">User</button>
<ui-view></ui-view>
<script src="/app.bundle.js"></script>
</body>
</html>
그리고, webpack에서 각 controller, angular-ui-router의 import를 위해 app.js를 다음과 같이 수정합니다.
var angular = require('angular');
require('angular-ui-router');
angular
.module('app', [ 'ui.router' ])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeController'
})
.state('user', {
url: '/user',
templateUrl: 'user.html',
controller: 'UserController'
});
});
require('./controllers/home');
require('./controllers/user');
여기서 중요한 것은 require의 위치입니다. controller들의 등록은 최초 app의 등록이 마쳐진 이후에 등록되어야지 됩니다.
angularJS application (ES2015) + webpack (STEP03)
이제, angularJs application을 es2015 문법으로 구현해보도록 하겠습니다. 개인적으로 가장 욕심이 나는 부분입니다.
es2015 문법을 사용해서 compile 하기 위해서는 babel을 이용해야지 됩니다. babel loader와 babel 2015 loader를 npm을 이용해서 설치합니다.
npm install babel-loader --save-dev
npm install babel-preset-es2015 --save-dev
이제 webpack.config에 babel loader를 등록시켜줍니다. js파일은 모두 babel loader에 의해서 처리가 되도록 설정합니다.
'use strict';
const config = {
entry: './src/app/app.js',
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'app.bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel',
query: {
presets: ['es2015']
},
exclude: /node_modules/
}]
},
devtool: 'inline-source-map',
plugins: []
};
module.exports = config;
이제 app.js, home.js, user.js 파일을 es2015 문법에 맞게 수정을 합니다.
home.js
class HomeController {
constructor() {
this.name = 'HomeCtrl';
console.log('HomeController.init');
}
getName() {
return this.name;
}
changeName(name) {
this.name = name;
return name;
}
}
module.exports = HomeController;
user.js
class UserController {
constructor() {
this.name = 'UserCtrl';
console.log('UserController.init');
}
getName() {
return this.name;
}
changeName(name) {
this.name = name;
return name;
}
}
module.exports = UserController;
app.js
var angular = require('angular');
require('angular-ui-router');
angular
.module('app', [ 'ui.router' ])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeController'
})
.state('user', {
url: '/user',
templateUrl: 'user.html',
controller: 'UserController'
});
})
.controller('HomeController', require('./controllers/home'))
.controller('UserController', require('./controllers/user'));
app.js에서 angular에 대한 dependency만을 갖고, 각 controller들은 dependency에서 angular에서 자유로워지는 것을 볼 수 있습니다. 이제 webpack 명령어를 실행해보면 다음과 같은 결과를 볼 수 있습니다.
Hash: f32a9fcb0a0a1f4a0d08
Version: webpack 1.12.14
Time: 1498ms
Asset Size Chunks Chunk Names
app.bundle.js 3.88 MB 0 [emitted] main
+ 6 hidden modules
외부 Library 들의 연결 (STEP04)
angularJs application을 개발하면 당연히 기존 library 들과 같이 사용해야지 되는 경우가 많습니다. 먼저 angular-ui-router의 경우에도 마찬가지지요.
대표적인 것들이 일단 lodash와 같은 utility library들이 있을것이고, angularjs에서 rest api 를 call 할때 사용하는 restangular 역시 주로 사용되는 library 입니다.
먼저 loadash에 대해서 알아보도록 하겠습니다. 저는 lodash에 대한 의존이 매우 높은 관계로 전역으로 등록시켜서 사용하고자 합니다.
npm을 통해서 lodash를 설치합니다.
npm install lodash --save
lodash의 경우에는 다른 기타 library들의 dependency가 심한편입니다. 또한 모든 controller에서 전역으로 사용하고싶은 욕심이 있습니다. 그렇다면 webpack에서 미리 등록을 시켜두면 좀 더 사용하기 편할 것 같습니다. browser 환경의 전역 scope로 미리 등록시켜두기 위해서는 webpack에서 제공하는 ProvidePlugin을 이용해서 등록을 시킵니다.
webpack.config.js를 다음과 같이 수정합니다.
const webpack = require('webpack');
const config = {
entry: './src/app/app.js',
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'app.bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel',
query: {
presets: ['es2015']
},
exclude: /node_modules/
}]
},
devtool: 'inline-source-map',
plugins: [
new webpack.ProvidePlugin({
'window._': 'lodash',
'_': 'lodash'
})
]
};
module.exports = config;
lodash를 window 전역과 local 모두에 등록을 시켰습니다. 이제 controller에서는 lodash를 require필요 없이 사용 가능합니다.
home.js
class HomeController {
constructor() {
this.name = 'HomeCtrl';
console.log('HomeController.init');
console.log(_.random(0, 5));
}
getName() {
return this.name;
}
changeName(name) {
this.name = name;
return name;
}
}
module.exports = HomeController;
이제 restangular를 추가할 차례입니다. npm을 이용해서 restangular를 설치하는 일련의 과정은 lodash와 동일합니다. 다만, restangular의 경우에는 angularjs module에 등록을 시켜줘야지 됩니다. app.js는 다음과 같이 변경되어야지 됩니다.
app.js
var angular = require('angular');
require('angular-ui-router');
require('restangular');
angular
.module('app', [ 'ui.router', 'restangular' ])
.config(($stateProvider, $urlRouterProvider) => {
$stateProvider.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeController'
})
.state('user', {
url: '/user',
templateUrl: 'user.html',
controller: 'UserController'
});
})
.config(RestangularProvider => {
console.log(RestangularProvider);
})
.controller('HomeController', require('./controllers/home'))
.controller('UserController', require('./controllers/user'));
이제 controller에서는 생성자에서 Restangular를 inject해서 사용가능합니다.
home.js
class HomeController {
constructor(Restangular) {
this.Restangular = Restangular;
this.name = 'HomeCtrl';
console.log('HomeController.init');
console.log(_.random(0, 5));
this.Restangular.all('').get('data.json').then(result => {
console.log(result);
});
}
getName() {
return this.name;
}
changeName(name) {
this.name = name;
return name;
}
}
module.exports = HomeController;
Service, Directive, filter 추가 (Step 05)
angularJs의 주요 컨셉중 하나인 service, directive, filter의 경우, 기존 controller추가와 동일합니다. 다만 es2015 형식으로 코딩을 하는 경우, class를 이용해서 작성하는 것만 좀 유의해주면 될 것 같습니다.
userservice.js - service
class UserService {
constructor(Restangular) {
this.Restangular = Restangular;
}
getUserName() {
return 'username';
}
getUserInfo() {
this.Restangular.all('').get('info.json').then(info => {
console.log(info);
});
}
}
module.exports = UserService;
userfilter.js - filter
function filteringUser () {
return function (users) {
return _.filter(users, function (user) {
return user.name.indexOf('7') >= 0;
});
};
}
module.exports = filteringUser;
namedbutton.js - directive
function postLink(scope, element, attrs) {
console.log(attrs);
scope.ok = function () {
alert(scope.name);
};
}
function template(element, attrs) {
console.log(attrs);
return '<button ng-click="ok()">This is named button 확인</button>';
}
module.exports = function NameButtonDef() {
return {
restrict: 'E',
scope: {
name: '='
},
link: postLink,
template: template
};
};
app.js
var angular = require('angular');
require('angular-ui-router');
require('restangular');
angular
.module('app', [ 'ui.router', 'restangular' ])
.config(($stateProvider, $urlRouterProvider) => {
$stateProvider.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeController',
controllerAs: 'model'
})
.state('user', {
url: '/user',
templateUrl: 'user.html',
controller: 'UserController',
controllerAs: 'model'
});
})
.config(RestangularProvider => {
console.log(RestangularProvider);
})
.controller('HomeController', require('./controllers/home'))
.controller('UserController', require('./controllers/user'))
.service('UserService', require('./services/userservice'))
.filter('user', require('./filters/userfilter'))
.directive('namedButton', require('./directives/namedbutton'));
controller와 별 차이가 없는 코드 패턴을 보입니다. 개인적으로는 최고의 장점이 service, directive, filter 코드 자체에 angular dependency가 없어지는 것이 장점인것 같습니다.
jqLite 대신 jquery 사용하기 (step06)
기본적으로 angular.element의 경우, jquery가 없는 경우에는 angularjs내부에 include 되어 있는 jqlite를 이용해서 element handling을 지원합니다. 그런데 angular.element의 경우 jquery selector보다 매우 기능이 빈약합니다. bootstrap도 사용할 가능성도 높고, 그냥 기본적으로 jquery를 포함해서 사용하게 되는 경우가 더 일반적입니다.
그럼 angular.element에서 jquery를 사용하도록 할려면 어떻게 해야지 될까요? 예전 방법대로라면 다음과 같이 해주면 됩니다.
<script src="jquery.js"></script>
<script src="angular.js"></script>
네. angular보다 jquery를 먼저 선언해주면 모든것이 해결되었습니다. 그럼 비슷한 구문으로 실행해보도록 하겠습니다.
require('jquery');
const angular = require('angular');
console.log(angular.element('div'));
이러면 다음과 같은 에러가 발생합니다.
angular.js:13424 Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element
http://errors.angularjs.org/1.5.3/jqLite/nosel
네. jqLite를 사용하고 있지, jquery를 사용하고 있지 못하게 됩니다.
이런 경우에는 expose-loader와 import-loader를 이용해서 각 module에서 jquery등을 자동으로 내부내에서 import 시켜줘야지 됩니다.
npm을 이용해서 다음 module들을 설치합니다.
npm install imports-loader --dev-save
npm install expose-loader --dev-save
그리고 webpack.config.js의 module 부분을 다음과 같이 변경합니다.
module: {
loaders: [{
test: /\/angular\.js$/,
loader: 'imports?jQuery=jquery'
}, {
test: /\/jquery.js$/,
loader: 'expose?jQuery'
}, {
test: /\.js$/,
loader: 'babel',
query: {
presets: ['es2015']
},
exclude: /node_modules/
}]
},
코드 해석은 다음과 같습니다. jquery가 요청되는 경우 window.jQuery로 등록을 시키는 구문이 두번쩨 expose 구문입니다. 그리고 angular.js가 로드될 때, jQuery의 경우 jquery를 import 해서 사용하도록 강제하는 것입니다.
위의 두 구문은 매우 중요합니다. jquery 기반의 module들을 사용할 때, 안되는 이유의 대부분이 window.jQuery, window.$, window.jquery가 등록이 되지 않을 때 주로 나타나게 됩니다.
이제 저 구문을 넣어주고 webpack 을 실행해주면 다음과 같은 결과를 볼 수 있습니다.
[div#window-resizer-tooltip, div#feedly-mini, prevObject: jQuery.fn.init[1], context: document, selector: "div"]0: div#window-resizer-tooltip1: div#feedly-minicontext: documentlength: 2prevObject: jQuery.fn.init[1]selector: "div"__proto__: Object[0]
Summary
angularjs2가 나오는 이때에 유행에 어울리지 않는 angularjs와 최신 유행인 webpack간의 결합에 대해서 알아봤습니다.
위 소스는 모두 github에 올려두었고, step별로 tag를 달아두었습니다.
(https://github.com/xyzlast/webpack-angular1-step)
- angularjs1 application을 webpack으로 묶는 과정에 대해서 알아봤습니다.
- jquery 기반의 library들을 어떻게 결합할 수 있는지에 대해서 알아봤습니다.
css-loader등을 잘 설명하신 글이 있으니, 참고하셔서 보시면 좀 더 쉬울 것 같습니다.
(http://hyunseob.github.io/2016/04/03/webpack-practical-guide/index.html)
