Source Map Test using UglifyJS2 and Sass

目的

UglifyJS2 を使い、JavaScriptファイルに対するソースマップファイルを作成します。
Sass を使い、CSSファイルに対するソースマップファイルを作成します。
ブラウザにおいて、ソースマップファイルを使うことで、元のソースファイルが参照できるかテストします。

DOMContentLoaded イベントで以下に文字列を出力します。

実験内容

本ページで使用している JavaScript ファイル及び CSSファイルに対してソースマップファイルを配置しています。
ブラウザのデベロッパーツールを使い、JavaScript と CSS の変換前ファイルが参照できるか確かめます。
- 変換前ファイルは、ドキュメントルート上にあります。
Chrome であれば、Elementsパネルから各要素に適用されているスタイルの定義ファイルを開きます。また Consoleパネルでは、そこに出力されている文字列がどこで定義されているか確かめます。

準備

npm パッケージのインストール

$ npm i -D uglify-es sass

コード

Makefile (抜粋)

all: js css

js: main.min.js utils.mjs
css: main.min.css

main.min.js: js/main.js
        ./node_modules/.bin/uglifyjs js/main.js -c -m \
          -o js/main.min.js --source-map "root='..',url=main.min.js.map"

utils.mjs: js/utils.js
        ./node_modules/.bin/uglifyjs js/utils.js -c -m \
          -o js/utils.mjs --source-map "root='..',url=utils.mjs.map"

main.min.css: css/main.scss
        ./node_modules/.bin/sass css/main.scss css/main.min.css

clean:
        rm js/main.min.js
        rm js/main.min.js.map
        rm js/utils.min.js
        rm js/utils.min.js.map
        rm css/main.min.css
        rm css/main.min.css.map

--source-map オプションで root='..' を指定しているのがポイント

HTML (抜粋)

<head>
  ...
   <link rel="stylesheet" href="css/main.min.css">
  ...
</head>
<body>
  ...
  <script type="module" src="js/main.min.js"></script>
</body>

type="module" と指定することで、import が使えるようになる。

main.js

import utils from "./utils.mjs";

console.log("main.js loaded");

window.addEventListener("DOMContentLoaded", (event) => {
  utils.say("Hello, Static Import!");
  document.querySelector("#output").textContent="DOM fully loaded and parsed!!";
});

utils.js

export default {
  say: (msg) => {
    console.log(msg);
  }
};

メモ

(1) DevTools [Sources]パネル内で、変換前ファイルの内容を最新に更新する方法

SourcesContent がセットされている Source Map の場合は、Source Map ファイルをブラウザで読み込み直す。

Source Map Test using UglifyJS2 and Sass

目的

実験内容

準備

コード

メモ

(1) DevTools [Sources]パネル内で、変換前ファイルの内容を最新に更新する方法

参考