※このページではアフィリエイト広告を紹介しています

npmでインストールしたライブラリをブラウザで利用する ~Browserify~

JavaScript小ネタ
この記事は約7分で読めます。
広告

この記事の目的

文字起こしのライブラリvtt-to-textは、Node.jsに付属のnpmを使ってインストールします。

npmでインストールしたライブラリを使ったJavaScriptのプログラムは、そのままではWebブラウザ上で実行することができません。

そこでbrowserifyを使って、JavaScriptのプログラムをWebブラウザ上で使えるようにしてみました。

YouTubeから文字起こしファイルをダウンロードする ~yt-dlp~
この記事の目的 YouTubeには動画内の音声をテキスト化したデータがあります。この文字起こしデータをダウンロードする方法として、yt-dlpをご紹介します。 違法アップロード動画のダウンロードなど、法律違反をしないようにご注意ください。 ...
Browserify

 

サンプルコード

index.htmlは、ファイルを選択するボタンだけを配置したシンプルなWebページです。

一方main.jsは、npmでインストールしたライブラリをNode.jsの書き方で書いたJavaScriptです。

 

main.jsはそのままではWebブラウザ上で実行できないので、下記のコマンドでWebブラウザ上で実行できるJavaScript(ここではbundle.js)に変換します。そして、index.htmlには変換後のbundle.jsを読み込む記述を行います。

browserify main.js -o bundle.js

 

実行結果

ファイルを選択するボタンだけを配置したシンプルなWebページです。

参照ボタンをクリックしてvttファイルを選択すると、ファイル中のテキスト部分だけを抽出して表示してくれます。別のファイルを読み込みたいときは、F5でリロードする必要があります。

 

参考文献

最新のJavaScript技術の概要を学びました。フロントエンド(画面)の技術にそれほど詳しくないため、参考になりました。

Node.jsについて幅広く書かれた本です。1冊目の書籍より難しく、ごく一部しか読めていません。

コメント

タイトルとURLをコピーしました