Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

まえがき

フロントで使えそうなライブラリが、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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away