概要
highlight.jsがwebpackとあまり相性が良くない。
本系からダウンロードしてきたのをそのままwebpackでビルドするとエラーになる。
単純にscriptタグでインクルードすれば使えるけど、
せっかくなのでwebpackの知識も深めるという意味でなんとか対応してみた話。
現象
フォルダ構成
htmlはこんな感じ
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>testing highlight with webpack</title>
<link rel="stylesheet" href="./github.css">
</head>
<body>
<div>
<pre><code>
angular.module('myApp').service('AwesomeService', ['$http',
function($http) {
var i = 1;
this.yo = function() {
return 'AwesomeService:' + new Date().getTime();
};
this.name = 'AwesomeService';
this.ts = new Date().getTime();
this.up = function() {
i = i + 1;
};
}
]);
</code></pre>
</div>
<script src="../lib/js/jquery.min.js"></script>
<script src="http://localhost:3010/assets/hl.bundle.js"></script>
</body>
</html>
普通にrequireする
/* globals jQuery: true */
(function( undefined ) {
var $, hljs;
$ = require( 'jquery' );
// autoreload for html
require( 'raw!./hl.html' );
hljs = require( './highlight.pack' );
$(function() {
$( document ).ready(function() {
$( 'pre code' ).each(function( i, block ) {
hljs.highlightBlock( block );
});
});
});
})();
これだけだとhljsが見つからないとのこと、もちろんハイライトもされない
ダウンロードしてきたhighlight.pack.jsを整形して見てみると
モジュール化したあとで言語を登録している模様。
この状態ではglobalで普通にインクルードする時はこれで動くが
webpackでビルドするとhighlight.pack.jsが読み込まれた時点でhljsが存在しないから当然エラーになる。
解決策
モジュールと言語登録処理を分割し、言語登録処理でモジュールをインクルードしてそれを返せば良い。
使うときはモジュールファイルではなく言語登録ファイルをインクルードする。
こうすれば両方のファイルをインクルードする必要もなくなる。
手順
-
highlight.jsをカスタムパッケージ無しの状態でダウンロードする。 - ダウンロードしてきたピュアな
highlight.pack.jsのファイル名をhighlight.min.js（hljs.jsと略称）に変更。 - それから空の新たな
highlight.pack.js（pack.jsと略称）を用意。 - この
pack.jsが実際にインクルードされるライブラリーとなる。
pack.jsの中にhljs.jsをインクルードし言語登録をしてあげる
13行目のようにファクトリーを実行する際にhljs.jsを依存モジュールとしてインクルードして渡す。
scriptタグのインクルードされる際はwindowのhljsを渡す。
CommonJSモジュールの考え方
CommonJS形式でrequireする際、依存先のモジュールの関数を呼出して値をセットすることはできるが、依存先モジュールをそのまま返すことはできない。
CommonJSはexportsにメンバーを追加することでそれがrequire先で使えるようになる（理解が正しいかわからん）。
ということはpack.jsの中でhljs.jsをreturnで返しても何も受け取れない。
使い方が少し変わってしまうがこれを解決するために27行目のようにexportsオブジェクトにhljsプロパティとしてモジュールをセットしてあげる。
require先では下記のようにプロパティから取得すればOK。
hljs = require( './highlight.pack' ).hljs;
これでも新たな言語を追加したい場合はpack.jsに登録処理を追加して上げる必要があるという問題が残る。
結果
これでちゃんとハイライトされ、エラーも出ずに全てが丸く収まる
言語登録コマンド
highlight.jsは様々な言語を対応しており、それぞれのハイライト定義ファイルが別に用意されている。
対象言語だけをビルドするコマンドがnodeとブラウザー用に言語登録の用意されている。
それで試して見てもがやはりうまくいかないので上記の対策をせざるの得なかった。