javascript의 module을 import, require구문으로 사용하기

문제 발생

common 환경(ES5)에서 import 구문을 사용하거나
module 환경(ES6)에서 require 구문으로 모듈을 사용하려면 에러가 난다.

즉 환경에 따라서 import를 통해서만 가져오거나 require를 통해 가져오는 것만 허용되는 경우가 있다. 그러나 import와 require 모두를 한 프로젝트 내에서 사용해야 되는 경우도 발생한다. 그래서 이번 시간에는 사용하는 방법을 적용 해보려고 한다.

1. ES6이상에서 require 구문 사용하기

에러 예시

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/Users/package.json'
contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

package.json "type":"module"로 설정한 ES module scope 환경에서
ES5 기준으로 작성된 파일을 require로 불러오려면 위와 같은 에러가 발생한다.
확장자를 .js에서 .cjs로 변경해서 사용하면 되지만 그 파일이 무수히 많은 경우에는 바꾸는데 상당한 시간이 들 것이다.
그럼 차선책으로 require구문을 사용하려면 아래와 같이 하면된다.

아래의 예제는 환경 변수를 사용하기 위한 패키지인 dotenv를 불러오려는 경우로 가정 해본다.

import { createRequire } from "module";
const require = createRequire(import.meta.url);
require("dotenv").config();

2. 반복문을 사용하여 import 구문을 사용하여 파일 불러오기

반복문을 사용하여 import로 특정경로에 있는 파일을 추가하는 방법도 서술해보려고 한다.
아래 예시는 특정경로에서 .js파일 전체를 import해야되는 경우를 가정하고 만든 예제이다.

파일을 실행하고 있는 폴더 내(__dirname)에 아래와 같은 파일이 있다고 가정해보자

• user.js
• edit.js
• test.js

// 경로 설정을 위한 패키지 추가
import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";

// 설정한 경로를 변수에 담기
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const basename = path.basename(__filename);

// 비동기로 파일 추가
(async () => {
  	// files변수에 .js 파일로 된 파일들의 경로를 담은 배열 담기
    const files = fs.readdirSync(__dirname).filter((file) => {
        return (
            file.indexOf(".") !== 0 &&
            file !== basename &&
            file.includes(".js")
        );
    });
  
 	console.log(files); // ['경로/user.js','경로/edit.js','경로/test.js']

    files.map(async (file) => {
        const module = await import(path.join(__dirname, file)); 
        module.default(); // default()를 해주어야 해당 모듈이 실행된다.
    });
})();

위의 코드는 아래의 설명 순서대로 동작한다.
1. files 변수에 해당 파일을 실행하고 있는 경로에 있는 모든 .js 파일을 배열로 담는다
2. 경로를 담고 있는 배열을 반복문을 돌려서 import한 상태를 module 변수에 담아주고
3. 그것을 실행하기 위해 module변수에 .default()로 해당 모듈을 실행하여 import를 완료한다.
default()를 하는 이유는 각 모듈들이 export default를 해주기 때문에 default를 실행줘야 동작한다.