JavaScript
webpack

ブラウザでnpmモジュールを使いたい

まえがき

フロントで使えそうなライブラリが、npmモジュールとしてしか提供されていないときがあります。しかし、npmモジュールは2017.8現在、直接ブラウザが読み込めるものではありません。

こうなると、普段はビルドツールなぞ使わず、雑なジャヴァスクリプトをべた書きしているプログラマ(私)であっても、ビルドツールを使わざるをえません。現在の代表的なビルドツールといえば、webpackです。

さて、世の中的にはふつう、ターミナルが大得意な人たちがモダンでイケてる開発をやるためにwebpackを使っています。ですから、このような雑なニーズに初歩的な操作で対応する方法は、言うまでもないぜという感じであり、意外に転がっていなかったりします。

そこで、このようなことをやる記事を書いてみます。

markdown-it-katex

今回は、Markdownで数式を入力したい人に関係のある
markdown-it-katex というnpmモジュールをブラウザに読み込ませてみます。

(以下は記事の主題とは無関係なので読み飛ばしてOK)

多くのmarkdownパーサは、その仕様上、$内の\を尊重してくれません。
しかし、数式入力で最もメジャーな記法であるLaTeXにとって\は頻出記号です。
そのままだと、MarkdownとLaTeXの共存に頭をひねる必要があって面倒です。

基本的に markdownの解釈をした後にTeX記法を解釈してるから起こってる問題な気がする・・・。 何が原因かわかるまでめちゃくちゃデバッグしました(ノД`)

from: はてなブログのTeX記法で数式を書く時用のチートシートと注意点

Markdownで数式を書きたい人にとって、$内の\を尊重してくれると嬉しいです。
markdown-it-katexとは、markdown-it のプラグインであり
このプラグインを挟むことでmarkdown-it$内の\を尊重するようになります。

手順

前提として、Node.jsをインストール済みであることが求められます。
まずは、使いたいモジュールを用意するディレクトリを切り、npmモジュールを取ってきます。

markdown-it-katexのみならず、markdown-itjqueryもnpmモジュールとして取ってきています。
ただし、今回の例では、普通に<script>から読み込んでも構いません)

ターミナルを開き、次のコマンドを叩きます。

mkdir xx
cd xx
npm install webpack --save-dev
npm install markdown-it markdown-it-katex jquery

ビルド前のスクリプトを書きます。

// front.js
$  = require("jquery")
md = require('markdown-it')().use(require('markdown-it-katex'))
$(".markdown-body").html( md.render( $(".source").text() ) )

動作確認用のHTMLを書きます。

<!-- index.html -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/github-markdown-css/2.2.1/github-markdown.css"/>
<div class=markdown-body></div>
<div class=source style="display: none">

# Hello $\KaTeX$ !

</div>
<script src="bundle.js"></script>

webpackの設定を書きます。

これはできるだけ、最小限にしました。
ただしsource-mapはつけていて、これを与えると、
ブラウザのdevtoolsで変換元のソースにもとづきデバグができます。

// webpack.config.js
module.exports = {
  entry: './front.js',
  output: {
    filename: './bundle.js'
  },
  devtool: 'source-map',
};

ターミナルで、ビルドを実行しましょう。

$(npm bin)/webpack

ここで webpack.config.js を用意することすら面倒な人は、
コマンドに引数を書くことでビルドしても構いません。

$(npm bin)/webpack ./front.js ./bundle.js --devtool source-map

ビルドの結果、ブラウザで読み込め、かつnpmモジュールの諸々が入っている bundle.js ができます。

結果

$ ls
bundle.js
front.js
index.html
webpack.config.js

ブラウザで開いてみましょう。動いていますね。