[javascript]EC6 모듈을 정적, 전역 스크립트로 컴파일하기 위한 Gulp 태스크 가이드

아래는 EC6 모듈을 정적, 전역 스크립트로 컴파일하는 Gulp 태스크를 위한 가이드 문서의 예시입니다. 이 가이드는 Gulp를 사용하여 EC6 모듈을 컴파일하고, 이를 브라우저에서 전역적으로 사용할 수 있게 하는 방법에 대해 설명합니다.

---

EC6 모듈을 정적, 전역 스크립트로 컴파일하기 위한 Gulp 태스크 가이드

개요

이 가이드는 Gulp를 사용하여 EC6 모듈을 정적, 전역 스크립트로 컴파일하는 방법을 설명합니다. 이 방법을 통해, EC6 모듈이 브라우저에서 전역적으로 사용될 수 있도록 하며, node_modules에서 다른 모듈을 import하여 사용하는 경우에도 적용됩니다.

필요한 Gulp 플러그인

• gulp: Gulp 자체
• browserify: Browserify, 브라우저에서 Node.js 스타일의 require()를 사용할 수 있게 해줌
• babelify: Babel 변환기를 Browserify와 함께 사용
• vinyl-source-stream: Browserify 스트림을 Gulp로 변환
• vinyl-buffer: Gulp에서 사용할 수 있도록 Buffer로 변환
• gulp-sourcemaps: 소스맵 생성
• gulp-terser: JavaScript 코드 압축
• gulp-rename: 파일 이름 변경
• gulp-decomment: 주석 제거

설치 명령어

npm install gulp browserify babelify vinyl-source-stream vinyl-buffer gulp-sourcemaps gulp-terser gulp-rename gulp-decomment --save-dev

Gulp 태스크 예시

function compileModules(pathInfo) {
  return new Promise((resolve, reject) => {
    console.log("Compiling scripts: " + pathInfo.srcDir + "/*.js");
    const moduleName =
      pathInfo.pluginName.charAt(0).toUpperCase() +
      pathInfo.pluginName.slice(1);

    const publicDestDir = `public/${pathInfo.destDir}`;

    const b = browserify({
      entries: pathInfo.srcDir + `/${pathInfo.pluginName}.js`,
      debug: true,
      standalone: moduleName, // 모듈을 전역 변수로 노출
      transform: [babelify.configure({ presets: ["@babel/preset-env"] })],
    });

    return b.bundle()
      .pipe(source(pathInfo.pluginName.toLowerCase() + ".js"))
      .pipe(buffer())
      .pipe(sourcemaps.init({ loadMaps: true }))
      .pipe(decomment({ safe: true }))
      .pipe(gulp.dest(pathInfo.destDir))
      .pipe(concat(pathInfo.pluginName.toLowerCase() + ".js"))
      .pipe(terser())
      .pipe(rename({ suffix: ".min" }))
      .pipe(sourcemaps.write("./"))
      .pipe(gulp.dest(pathInfo.destDir))
      .pipe(gulp.dest(publicDestDir))
      .on("end", resolve)
      .on("error", (err) => {
        console.error("Compile error:", err);
        reject(err);
      });
  });
}

태스크 설명

• pathInfo: 모듈의 경로 및 이름 정보를 담고 있는 객체
• moduleName: 모듈 이름을 PascalCase로 변환
• publicDestDir: 컴파일된 파일을 저장할 public 디렉터리 경로 계산
• browserify: 모듈의 진입점 지정 및 standalone 옵션으로 전역 변수 노출 설정
• babelify: EC6 코드를 브라우저에서 호환 가능한 JavaScript로 변환
• source 및 buffer: Browserify 스트림을 Gulp 스트림으로 변환
• sourcemaps, decomment, terser, rename: 소스맵 생성, 주석 제거, 코드 압축, 파일 이름 변경
• gulp.dest: 컴파일된 파일 저장

이 가이드를 따르면 EC6 모듈을 정적, 전역 스크립트로 컴파일하고 브라우저에서 사용할 수 있습니다.

---

이 가이드는 Gulp 태스크에 대한 기본적인 설명을 제공합니다. 실제 프로젝트에 맞게 세부사항을 조정하고, 필요에 따라 추가적인 설명을 추가할 수 있습니다.