Laravel5 + Angular2 + Fuse-box 사용하기

먼저, Laravel5 + Angular2 환경을 구축하기 위하여 제법 복잡한 설정들을 하였습니다. 2016/11/09 - [프로그래밍/언어 - PHP] - Angular2 설치하기 - Laravel 5

하지만 개발하면서 불편한 점이 한두가지가 아니더군요. gulp typescript, gulp copy 명령어의 연속... 그리고 브라우저 새로고침 반복들... 이후, webpack 의 존재를 알게되었지만 이상하게 관련 설정을 하기 싫더군요.(게으름이...) 그러다 우연히 Fuse-box 란 놈을 발견하게 되었습니다. 자석에 이끌리듯 설정하게 되었네요.

1. 설치

npm 을 사용하여 fuse-box 를 설치합니다.

npm install fuse-box --save-dev

2. 환경설정(디버그)

라라벨 설치경로 루트에서 fuse.js 파일을 생성합니다.

const fb = require('fuse-box');

const fuseBox = fb.FuseBox.init({

    homeDir: 'resources/assets/typescript/',

    sourceMap: {

        bundleReference: 'app.js.map',

        outFile: 'public/js/app.js.map',

    },

    outFile: 'public/js/app.js',

    plugins: [

        [

            fb.LESSPlugin(),

            fb.CSSPlugin()

        ],

        fb.TypeScriptHelpers(),

    ]

});

fuseBox.devServer('> main.ts', {

    port: 44444,

    httpServer: false

});

라라벨을 사용하기 위하여 기존 웹서버를 이용하게됩니다. 따라서 자체 웹서버를 끕니다.(httpServer: false)

node fuse.js

상기와같이 fuse.js 를 실행하면 소스를 변경&저장할 때마다 새로 빌드하여 실시간으로 브라우저에 반영합니다.

3. 환경설정(배포)

const fb = require('fuse-box');

const fuseBox = fb.FuseBox.init({

    homeDir: 'resources/assets/typescript/',

    sourceMap: {

        bundleReference: 'app.js.map',

        outFile: 'public/js/app.js.map',

    },

    outFile: 'public/js/app.js',

    plugins: [

        [

            fb.LESSPlugin(),

            fb.CSSPlugin(),

        ],

        fb.TypeScriptHelpers(),

        fb.UglifyJSPlugin()

    ]

});

fuseBox.bundle('> main.ts');

이때, Angular2 에서도 enableProdMode() 를 추가하여야합니다.

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {AppModule} from './app.module';

import {enableProdMode} from '@angular/core';

const platform = platformBrowserDynamic();

enableProdMode();

platform.bootstrapModule(AppModule);

4. 기존 gulpfile.js 설정에서 변경사항

mix.typescript 부분을 모두 삭제합니다.

mix.copy 부분도 아래의 두 개를 제외하고 모두 삭제합니다.

mix.copy('./node_modules/core-js', 'public/js/core-js');

mix.copy('./node_modules/zone.js/dist', 'public/js/zone.js/dist');

엄청 간단하고 깔끔해졌네요. 신규 파일이 있을때마다 gulpfile.js 에 추가하여야했는데 그런 부분이 해소가 되었습니다.

5. script 호출 수정

<script src="/js/core-js/client/shim.min.js"></script>

<script src="/js/zone.js/dist/zone.min.js"></script>

{{--<script src="/js/systemjs/dist/system.src.js"></script>--}}

{{--<script src="/js/systemjs.config.js"></script>--}}

{{--<script>--}}

    {{--System.import('app').catch(function(err){ console.error(err); });--}}

{{--</script>--}}

shim 과 zone 을 제외하고 모두 삭제합니다. 아울러 systemjs.config.js 파일도 필요없게 되었습니다.

6. 기타

Fuse-box 를 통한 실시간 변경 반영을 위해서... 기존 Angular2 콤포넌트의 templateUrl 을 사용하여 html 부분을 분리한것을 모두 template 으로 옮겼습니다. 끝으로 크롬에 Angury 를 설치(https://augury.angular.io/)하면 훨씬 더 용이하게 Angular2 디버깅이 가능합니다.