Nodejs/ES6 동적으로 폴더내의 js 모듈 로딩

개발관련 글입니다.!! 공부 하는즁!!

아시다시피 ES6와 Node.js는 문법이 조금 다릅니다.

그러다보니 항상 헷갈리네요..!!

그래서 정리한판..!!

---

NodeJS

• 여러방법이 있겠지만, 이러한 방법도 있습니다.
• 기본적으로 폴더내의 index.js를 먼저 읽으므로 index.js에 아래와 같이 코딩합니다.
• 그러면 해당 폴더내에 존재하는 다른 js 파일들의 module.exports 된 내용들을 가져오게 합니다.
• exports 방법에 따라서 다양하게 활용은 가능합니다.

// index.js
var normalizedPath = require("path").join(__dirname, "./");

const modules = {};

require("fs")
  .readdirSync(normalizedPath)
  .forEach(function (file) {
    if (file.indexOf("index.js") > -1) return;
    const moduleName = file.replace(/(\.\/|\.js)/g, "");
    modules[moduleName] = require("./" + file);
  });

module.exports = modules;

• 다른모듈 샘플

// test.js
module.exports = {
   name:"TEST",
   val:15
}

• 방법2
• glob를 사용하는 방법입니다.
• 이 방법은 실행경로에 따라서 경로설정을 주의해야합니다.
• 한번 해보시면서 경로에러가 뜨면 조금씩 수정하면 됩니다.

var glob = require( 'glob' )
  , path = require( 'path' );

glob.sync( './routes/**/*.js' ).forEach( function( file ) {
  require( path.resolve( file ) );
});

ES6

• ES6는 import와 export default 를 이용하여 아래와 같이 설정을 하면 됩니다.
• 다른 js 모듈에서 export default를 사용한다는 가정하에 사용하는 방법입니다.

// index.js

const requireModule = require.context('.', false, /\.js$/);
const modules = {};

requireModule.keys().forEach(fileName => {
  if (fileName === './index.js') return;
  const moduleName =fileName.replace(/(\.\/|\.js)/g, '');
  modules[moduleName] = requireModule(fileName).default;
});

export default modules;

• 다른 모듈 샘플

import Vue from 'vue';

const state = {
    username: null,
    account: null,
};

const mutations = {
    saveUsername(_state, payload) {
        Vue.set(_state, 'username', payload);
    },
    saveAccount(_state, payload) {
        Vue.set(_state, 'account', payload);
    },
    logout(_state) {
        Vue.set(_state, 'username', null);
    },
};

const actions = {
    logout: () => {
        window.location = '/';
    },
};

export default {
    state,
    mutations,
    actions,
};

제가 가장 필요해서 정리해봅니다!!
참고바래봅니다.