개시하다

나는 햇볕을 쬐는 것이 묻히는 것보다 더 좋은 점이 있다고 생각해서 이렇게 했다.

소스맵이라는 병?

Uglify와less 등 원본 출력을 처리하는 도구가 있지만 출력을 읽는 파일도 원본 파일의 몇 줄인지 몇 열인지 알 수 없습니다.소스맵을 사용하면 원본 파일에 해당하는 부분을 알 수 있습니다.원본 파일의 마지막 줄에 집중적으로 출력하거나 x.map처럼 단독으로 출력하는 종류가 다양합니다.

종지

sourcemap의 대응 방법은 도구에 따라 다릅니다. inline sourcemap은 지원되지 않습니다. 변환 전의 원본 파일이 없으면 sourcemap에 아무것도 표시되지 않습니다. (※ 1)마치 아래 그림처럼 느껴진다.새하얗다

조금 아쉬웠기 때문에 이번 취지는 source-map로 소스맵을 엉망진창으로 만들어 귀여운 소스맵을 만드는 것이다.구체적으로 말하면, 나는 아래의 조건을 만족시키고 싶다.

변환 전 소스 필요 없음

x.map 같은 맵 파일 필요 없음

사르케-맵의 결말?

모젤라가 만든 소스맵의 모듈을 제작하고 편집하기 위해서다.Type Script 등 일부를 제외하고는 거의 다 사용하고 있는 것 같아요.데팩트 기준이라고 해도 괜찮겠지?이번 사례에서는'SourceMapConsumer, SourceMapGenerator'두 가지만 이해하면 된다.

SourceMapConsumer

JSON에서 소스맵 객체를 만들거나 소스맵 객체에 대한 정보를 얻는 데 사용됩니다.한 마디로 하면 다음과 같은 형식으로sourcemap 대상을 생성할 수 있다는 것을 기억하면 된다.

var sourceMap = require('source-map');

var rawSourceMapJsonData = fs.readFileSync('xx.map', 'utf8');         // 適当にsourcemapの文字列を取得する
var consumer = new sourceMap.SourceMapConsumer(rawSourceMapJsonData);

SourceMapGenerator

소스맵을 실제로 편집하거나 소스맵 객체를 JSON으로 복원할 때 사용합니다.위에서 작성할 수 있는 SourceMapConsuumer 객체는 다음과 같은 형태로 생성됩니다.

var generator = sourceMap.SourceMapGenerator.fromSourceMap(consumer);

다음 형식으로 JSON을 반환할 수 있습니다.

var rawSourceMapJsonData = generator.toString();

변환 전 소스 파일 필요 없음

소스맵 대상에 소스콘텐츠 정보를 추가해야 합니다.

SourceMapGenerator 객체 가져오기

SourceMapGenerator 객체에 원본 파일에 대한 정보 설정

JSON

으로 돌아가기

파일로 출력

// 2の処理の具体例(エラーハンドリングとかなし)
consumer.sources.forEach(function(sourcePath) {
  var sourceContent = fs.readFileSync(sourcePath, 'utf8');
  generator.setSourceContent(sourcePath, sourceContent, 'utf8');
});

x.map 같은 맵 파일 필요 없어

소스맵 객체를 JSON으로 반환하고 출력된 파일의 마지막 줄을 지정된 형식으로 붙여넣어야 합니다.

변환 전 소스 파일 필요 없음 3

기본 64

로 인코딩

지정된 형식에 대한 주석

변환된 파일의 마지막 줄로 출력(아래 코드 참조)

// 1から３まで
var base64 = require('base-64');
var utf8 = require('utf8');

var rawSourceMapJsonData = generator.toString();
var base64edSourceMapData = base64.encode(utf8.encode(rawSourceMapJsonData));

/* 以下のコメントを出力ファイルの最終行に貼り付ける
   今回はcssだけどjsだと「//# 」とか使う。半角スペースがないと正常に動かないので注意     */
var sourcemapComment = "/*# sourceMappingURL=data:application/json;base64," + rawSourceMapJsonData + " */";

// 出力ファイルだと思ってほしい。以下みたいな感じになる。ソースマップは適当なので動かない

var finalSourceLine = 'にゃーん'; // 出力ファイルの最終行
/*# sourceMappingURL=data:application/json;base64,b3dhYml0bw== */

시험을 준비하다

※ 1 현재 아이템은 대체로 해당 아이템이 있습니다.그럼 왜 이런 기사를 썼을까요?라벨을 보세요.

참고 자료

sourcemap의 구조이것