webpackを使う。
開発環境
- Raspberry Pi 3 Model B
- Node.js
- npm
- npmモジュール
- npm
前回まで
概要
パーサ
変換は既存ライブラリを使って楽をしたい。そこで、markdown-itというパーサを使う。
問題
npmモジュールがブラウザで使えない。
markdown-it-rubyのような拡張プラグインを使いたいが、npmモジュールとしてしか公開されていない。ブラウザで使いたいのにJSコードがない。
解決
webpackを使う。
フロントエンドというのがキーワードっぽい。
事前にNode.jsとnpmをインストールすること。
- Node.js, npm にて npmモジュール webpack, markdown-it, markdown-it-ruby をインストールする
- Node.js用のJSコードで markdown-it, markdown-it-ruby の利用コードを実装する
- webpack にて 2 をブラウザで使えるjsコードに変換する
参考
さらに詳しくは以下参考。
手順
webpackなどをインストールしたい任意ディレクトリを作成する。
$ mkdir /tmp/任意ディレクトリ
$ cd /tmp/任意ディレクトリ
カレントディレクトリをnpmローカルパッケージとして初期化する。
$ npm init
各種パッケージをインストールする。
$ npm install webpack $ npm install jquery $ npm install markdown-it $ npm install markdown-it-ruby $ npm install markdown-it-anchor
$ npm install webpack > uglifyjs-webpack-plugin@0.4.6 postinstall /tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin > node lib/post_install.js npm WARN markdonwnit@1.0.0 No description npm WARN markdonwnit@1.0.0 No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm"}) + webpack@3.10.0 added 251 packages in 97.437s
$ npm install jquery npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN markdonwnit@1.0.0 No description npm WARN markdonwnit@1.0.0 No repository field. + jquery@3.3.1 added 1 package in 3.228s
$ npm install markdown-it npm WARN markdonwnit@1.0.0 No description npm WARN markdonwnit@1.0.0 No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm"}) + markdown-it@8.4.0 added 7 packages in 20.169s
$ npm install markdown-it-ruby npm WARN markdonwnit@1.0.0 No description npm WARN markdonwnit@1.0.0 No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm"}) + markdown-it-ruby@0.1.1 added 1 package in 15.76s
$ npm install markdown-it-anchor npm WARN markdonwnit@1.0.0 No description npm WARN markdonwnit@1.0.0 No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm"}) + markdown-it-anchor@4.0.0 added 2 packages in 16.053s
ローカルの.binを環境変数のパスに通す。
export PATH=$PATH:/tmp/任意ディレクトリ/node_modules/.bin
- /tmp/任意ディレクトリ/
- node_modules/
- testcode/
- front.js
- index.html
- webpack.config.js
front.js
$ = require("jquery") md = require('markdown-it')().use(require('markdown-it-ruby')) $(".markdown-body").html( md.render( $(".source").text() ) )
index.html
<meta charset="utf-8"> <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 {漢字|かん|じ} [でんでんMarkdown書式におけるルビ記法](https://conv.denshochan.com/markdown#ruby)が使える。 {超電磁砲|レールガン}のような厨ニ病ルビも可。 </div> <script src="bundle.js"></script>
webpack.config.js
module.exports = { entry: './front.js', output: { filename: './bundle.js' }, devtool: 'source-map', };
front.jsをbundle.jsに出力する。
$ webpack
Hash: 53335331efeadc3253c8 Version: webpack 3.10.0 Time: 5932ms Asset Size Chunks Chunk Names ./bundle.js 524 kB 0 [emitted] [big] main ./bundle.js.map 677 kB 0 [emitted] main [12] ./front.js 147 bytes {0} [built] + 71 hidden modules
index.htmlをブラウザで開く。
ルビが表示される。{漢字|かん|じ}が<ruby>のHTMLに動的変換されたようだ。成功！
