feat(sourcemap): sourcemap 파일 생성 (#15)

* chore(package): @babel/generator 추가

* feat(sourcemap): sourcemap 생성 함수

* feat(path): add relative function

* feat(parser): sourcemap 생성 연결

* chore(package): reinstall package

* chore(package): delete package-lock.json

* chore(package): add package-lock.json

package.json

@@ -25,7 +25,8 @@
   },
   "homepage": "https://github.com/danmooozi/kimbap.js#readme",
   "dependencies": {
-    "@babel/core": "7.22.20"
+    "@babel/core": "7.22.20",
+    "@babel/generator": "^7.23.0"
   },
   "devDependencies": {
     "jest": "29.7.0"

src/index.js

@@ -2,6 +2,7 @@ import ModuleCompiler from './parser/index.js';
 import CommandLineInterface from './cli/index.js';
 import { runtimeTemplate, moduleMapTemplate } from './output/template.js';
 import { createOutputFile } from './output/index.js';
+import { createSourceMapFile } from './sourcemap/index.js';
 
 class KimbapBundler {
   constructor({ entry, output, ast }) {
@@ -10,9 +11,11 @@ class KimbapBundler {
   }
 
   build() {
-    const moduleCompiler = new ModuleCompiler(this.entry);
+    const moduleCompiler = new ModuleCompiler(this.entry, this.output.path);
     const { moduleList } = moduleCompiler.run();
-
+
+    createSourceMapFile({ modules: moduleList, outputPath: this.output.path });
+
     const entryFilePath = moduleList[0].filePath;
     const outputContent = runtimeTemplate(
       moduleMapTemplate(moduleList),

src/parser/index.js

@@ -1,12 +1,14 @@
 import { dirname, resolve } from 'path';
 import { parseSync } from '@babel/core';
 import transform from '../transform/index.js'
+import { createSourceMap } from '../sourcemap/index.js';
 import Queue from '../util/queue.js';
 import PathUtil from '../util/path.js';
 
 class ModuleCompiler {
-  constructor(entry) {
+  constructor(entry, output) {
     this.entry = entry;
+    this.output = output;
     // 컴파일이 완료된 모듈을 담은 Array compiledModules
     this.compiledModules = [];
   }
@@ -63,10 +65,12 @@ class ModuleCompiler {
         mapping[importPath] = modulePath;
       });
 
+
+    const sourceMapContent = createSourceMap({ ast, fileContent, filePath, entryPath: this.entry, outputPath: this.output });
     // 현재 모듈의 코드를 transform 하여 변환된 결과를 보관
     const { transformedContent } = transform(ast, fileContent);
 
-    return { filePath, mapping, transformedContent };
+    return { filePath, mapping, transformedContent, sourceMapContent };
   }
 
   #getLocalModulePath(path, root) {

src/sourcemap/index.js

@@ -0,0 +1,46 @@
+import { CodeGenerator } from '@babel/generator';
+import { createOutputFile } from '../output/index.js';
+import PathUtil from '../util/path.js';
+
+/**
+ * generate sourcemap
+ * @param {object} params
+ * @param {object} params.ast
+ * @param {string} params.fileContent
+ * @param {string} params.filePath
+ * @param {string} params.entryPath
+ * @param {string} params.outputPath
+ * 
+ * @returns {object}
+ */
+export const createSourceMap = ({
+    ast,
+    fileContent,
+    filePath,
+    entryPath,
+    outputPath
+}) => {
+    const sourceFileName = PathUtil.relative(outputPath, filePath);
+
+    const generator = new CodeGenerator(ast, { sourceMaps: true, sourceFileName, sourceRoot: entryPath }, fileContent);
+    const { map } = generator.generate(ast, {}, fileContent);
+
+    return map;
+}
+
+/**
+ * sourcemap 파일 작성
+ * @param {object} params
+ * @param {object[]} params.modules
+ * @param {string} params.outputPath
+ */
+export const createSourceMapFile = ({ modules, outputPath }) => {
+    modules.map(module => {
+        const { sourceMapContent, filePath } = module;
+
+        const parsedPaths = filePath.split('/');
+        const filename = parsedPaths[parsedPaths.length - 1];
+
+        createOutputFile({ path: outputPath, filename: `${filename}.map` }, JSON.stringify(sourceMapContent));
+    });
+}

src/util/path.js

@@ -2,11 +2,9 @@ import {
   existsSync,
   lstatSync,
   readFileSync,
-  mkdirSync,
-  writeFileSync,
 } from 'fs';
 
-import { join } from 'path';
+import { join, relative } from 'path';
 
 /**
  * Node.js 에서 require() 모듈을 찾기 위해 진행하는 알고리즘을 구현하기 위한 Util
@@ -41,11 +39,22 @@ class PathUtil {
    * join paths
    * @param {string[]} paths 
    * 
-   * @returns string
+   * @returns {string}
    */
   static join(paths) {
     return join(...paths);
   }
+
+  /** 
+   * get relative path 
+   * @param {string} from
+   * @param {string} to
+   * 
+   * @returns {string}
+  */
+  static relative(from, to) {
+    return relative(from, to);
+  }
 }
 
 export default PathUtil;