좌충우돌 개발 블로그

Javascript 라이브러리를 만든 후 버전별로 빌드할 필요가 생겼다.

alpha/beta/release 이렇게 빌드를 하려고 했는데 생각처럼 되지 않아 시행착오를 여러 번 겪었다.

Grunt와 Webpack을 사용하여 빌드하고 있는데

Webpack은 env 파라미터에서 버전 정보를 받아서 빌드하도록 했다.

또한 버전별로 주소가 바뀌는 값이 있어 이를 동적으로 처리하기 위해 DefinePlugin을 이용했다.

Javascript에서 DefinePlugin에 정의된 키가 해당 값으로 자동으로 변경되어 빌드된다.

여기서 값을 설정할 때 중요한 것이 JSON.stringify로 값을 감싸줘야 제대로 동작한다.

webpack.config.js는 다음과 같이 작성하며 된다.

const webpack = require('webpack');
const path = require('path');
const config = require('./config.json');

module.exports = env => {
    if (!env || !env. VERSION) {
        env = {
            ...env,
            VERSION: 'release'
        };
    }
    const filename = env. VERSION === 'release' ? 'main.min.js' : `${env. VERSION}-main.min.js`;

    return {
        entry: './src/index.ts',
        target: 'node',
        mode: 'production',
        module: {
            rules: [
                ...
            ]
        },
        resolve: {
            extensions: [ '.ts', '.js' ]
        },
        plugins: [
            new webpack.DefinePlugin({
                SPECIFIC_URL: JSON.stringify(config.contexts[env.VERSION].SPECIFIC_URL)
            })
        ],
        output: {
            filename: filename,
            path: path.resolve(__dirname, 'dist')
        }
    };
};

다음과 같이 실행하면 된다.

$ webpack --env.VERSION=release

그리고 한번에 버전별로 빌드하기 위해 Grunt를 사용했다.

버전이 추가되도 자동으로 동작할 수 있도록 reduce를 이용했다.

다음과 같이 작성하여 사용하고 있다.

const path = require('path');
const webpackConfig = require('./webpack.config.js');
const versions = ['alpha', 'beta', 'release'];

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        webpack: versions.reduce((obj, version) => {
            const app = version === 'release' ? 'app' : `${version}-app`;
            obj[app] = webpackConfig({VERSION: version});
            return obj;
        }, {})
    });

    grunt.loadNpmTasks('grunt-webpack');

    grunt.registerTask('default', ['webpack']);
};

참고 문헌

1. https://webpack.js.org/guides/environment-variables/

2. https://webpack.js.org/plugins/define-plugin/