[Vue.js] 모듈화

아래 코드에서 common.js와 common2.js를 모듈화

import common from '@/assets/js/common.js';
import common2 from '@/assets/js/common2.js';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    method1() {
      common.method1();
    },
    method2() {
      common2.method2();
    }
  }
}

 

1. Webpack 사용하기

Webpack은 대표적인 모듈 번들러로서, 모듈의 종속성을 분석하고 묶어서 하나의 파일로 만들어 줍니다. 이를 사용하면 여러 개의 모듈을 하나의 파일로 번들링할 수 있습니다.

예를 들어, common.js와 common2.js가 있다면, Webpack 설정 파일에서 다음과 같이 설정해주면 됩니다.

 

vue/cli 3 이전

// webpack.config.js
module.exports = {
  entry: {
    app: './src/main.js',
    common: ['./src/assets/js/common.js', './src/assets/js/common2.js']
  },
  // ...
};

vue/cli 3 버전부터 webpack.config.js 파일이 없어짐

 

//vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  outputDir: '../src/main/webapp/resources/static/',
  /*
  devServer: {
    proxy: {
      '/': {
        target: "http://localhost:8080",
        changeOrigin: true,
      }
    }
  } 
  */
  configureWebpack: {
    resolve: {
      alias: {
        'common': '@/src/assets/js'
      }
    }
  }
})

위의 설정에서 common.js와 common2.js는 common이라는 이름으로 하나의 모듈로 묶입니다. 이후 Vue 컴포넌트에서 다음과 같이 common 모듈을 import하여 사용할 수 있습니다.

 

import common from '@/assets/js/common.js';
import common2 from '@/assets/js/common2.js';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    method1() {
      common.method1();
    },
    method2() {
      common2.method2();
    }
  }
}

 

2. ES6 모듈 import/export 사용하기

ES6 모듈은 기본적으로 단일 파일로 작성되며, 다른 파일에서도 import/export를 사용하여 사용할 수 있습니다. 이를 사용하면 모듈의 종속성을 명시하고 각 모듈의 역할을 명확히 할 수 있습니다.

예를 들어, common.js와 common2.js가 있다면, 각 파일에서 export한 메서드를 index.js 파일에서 import하여 하나의 모듈로 묶을 수 있습니다.

// common.js
export default {
  method1() {
    alert("1click");
  }
};

// common2.js
export default {
  method2() {
    alert("2click");
  }
};

// index.js
import common from './common';
import common2 from './common2';

export default {
  common,
  common2
};

위의 예시에서 index.js 파일에서 common.js와 common2.js를 import하고, 각각 export한 객체를 하나로 합쳐서 export합니다. 이후 Vue 컴포넌트에서 다음과 같이 index.js 파일에서 export한 모듈을 import하여 사용할 수 있습니다.

 

import myModules from '@/assets/js/index.js';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    method1() {
      myModules.common.method1();
    },
    method2() {
      myModules.common2.method2();
    }
  }
}

이 방법은 Webpack 등의 번들러 없이도 사용할 수 있어서, 번들러를 사용하지 않는 간단한 프로젝트에서는 유용합니다.

 

3. requierJS 사용하기

requireJS는 AMD (Asynchronous Module Definition) 방식으로 모듈을 정의하고 사용하는 자바스크립트 라이브러리입니다.

모듈을 정의하는 파일에서는 define() 함수를 사용하여 모듈을 정의하고 내보냅니다. 예를 들어, common.js와 common2.js모듈을 정의하려면 다음과 같이 할 수 있습니다.

아래코드에서 각각다른 파일(주석부분)!!

// common.js
define([], function() {
  return {
    method1: function() {
      alert('common module method1');
    }
  };
});

// common2.js
define([], function() {
  return {
    method2: function() {
      alert('common2 module method2');
    }
  };
});

그런 다음, 이러한 모듈을 사용하는 파일에서는 require() 함수를 사용하여 모듈을 가져옵니다. 예를 들어, HelloWorld.vue 파일에서 common.js와 common2.js를 사용하려면 다음과 같이 할 수 있습니다.

// HelloWorld.vue
define(['@/assets/js/common', '@/assets/js/common2'], function(common, common2) {
  return {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    methods: {
      method1() {
        common.method1();
      },
      method2() {
        common2.method2();
      }
    }
  };
});

이렇게 정의된 모듈은 requireJS의 로더가 처리하고, 해당 모듈이 의존하는 다른 모듈을 모두 로드한 후에 비동기적으로 해당 모듈을 실행합니다. 따라서 모듈 간 의존성 관리와 모듈 로딩 시점을 더욱 유연하게 처리할 수 있습니다.