Node.jsのrequire()をブラウザでも使えるようにする方法

表題の件で質問お願い致します。
以下のhtmlとJSのファイルを使ってwebアプリを作っています。
（まだ何もできていませんが・・・）

ブラウザで画面を確認して「1:出力」ボタンを押すとJSのexcel_output()関数が呼びだしたかったのですが、requireが見つからないというエラーが確認できたので調べたところ変換する必要があるとのことなのでbrowserifyを使って以下のコマンドからファイルの変換を行いappplication.jsを作成しました

browserify -r C:\Users\Desktop\excel\bulma.js -o C:\Users\Desktop\excel\appplication.js

その生成したファイルをhtmlの中に埋め込み

html
1<script type="text/javascript" src="/js/appplication.js"></script>

この状態で「1:出力」ボタンを押すと excel_output()が呼び出せるのかと思ったのですが

ReferenceError: excel_output is not defined
onclick　http://127.0.0.1:5500/bulma.html:1:1

上記のエラーが出て動作させることが出来ません。
browserifyを使ったサイトなども見たのですがhtmlに記述するだけで使えているように感じます。
何か記述がおかしいのでしょうか？どこが原因か分からず悩んでいます。
初歩的な質問ですがアドバイス宜しくお願い致します。

bulma.html

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>出力画面</title>
6    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.2/css/bulma.css">
7    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
8    <link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">
9    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
10    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
11    <script type="text/javascript" src="/js/appplication.js"></script>
12  </head>
13  <script>
14  </script>
15  <body>
16    <div class="hero is-info is-danger">
17      <div class="hero-body">
18          <div class="container">
19            <h1 class="title">出力画面</h1>
20          </div>
21      </div>
22    </div>
23    <main class="columns">
24        <div class="submenu column is-3">
25            <aside class="box" style='font-size: 20px;'>
26                Test
27            </aside>
28        </div>
29    </main>
30    <div class="output_button">
31      <div class="control">
32          <button class="button is-info is-outlined is-large" type='submit' onclick="excel_output();"/>1:出力</form>
33      </div>
34      <div class="control">
35          <button class="button is-success is-outlined is-large" type='submit' />2:出力</form>
36      </div>
37      <div class="control">
38          <button class="button is-danger is-outlined is-large" type='submit' />3:出力</form>
39      </div>
40    </div>
41  </body>
42</html>

変換前：bulma.js

js
1function excel_output(){
2    //モジュール宣言
3    console.log('start');
4    var moment = require('moment');
5    var fs = require('fs');
6
7    //年、月、日 情報取得
8    var date = moment().format('YYYYMMDD')
9    var year = moment().year();
10    var month = moment().month() + 1;
11    var day = moment().date();
12
13
14    // コピー元ファイル（ひな形になるファイル）
15    const src = 'C:\Users\Desktop\test.xlsx';
16
17    // 出力先フォルダ内のファイル名一覧
18    const filenames = fs.readdirSync("C:\Users\Desktop\node-test\" + month + "月");
19
20    //ファイルタイトル指定
21    const file_title = 'test_excel'
22
23    //ファイル連番付与
24    let filename = '';
25    for (let file_num = 1; true; file_num++) {
26        filename = (file_title + date + "_" + file_num + ".xlsx");
27        if (filenames.indexOf(filename) < 0) break;
28    }
29
30    //グローバル変数セット
31    global.set("global_filename", filename);
32    msg.global_filename = filename;
33
34
35    //コピー先ファイル
36    const dest = "C:\Users\Desktop\node-test\" + month + "月\" + filename;
37
38    //ファイル作成
39    fs.copyFileSync(src, dest);
40};

行動規範の内容に同意します

回答2件

ベストアンサー

BrowserifyはJavaScriptでNode.jsのrequireを模倣するものですが、
その実装はJS部分をまるっとコピペして巨大な1ファイルに繋げて、requireという自作関数をペタっと貼り付けて呼び出せるようにしただけです。

Node.jsはrequireだけではなく、
JavaScriptでは使えなかったファイルの読み書き、TCP/UDPのパケットの送信・待受、子供のプロセス作って任意コマンド発行等の機能を実装する為に、C++で作った自作モジュールを無理やりくっつけている魔改造モデルです。

流石のBrowserifyもC++モジュールの部分はブラウザーには持っていけません。
Node.jsで追加されたC++に依存する機能は基本的に使用できません。
https://nodejs.org/dist/latest-v11.x/docs/api/で紹介されているようなものはだいたいアウトなので気をつけましょう。

要するにNode.jsに依存してないMoment.jsは動くけど、fsモジュールは動かないってことですね。
ファイルの読み書きがしたいならHTML5のFileAPI等、ブラウザが提供しているAPI機能を使うしかありません。

投稿2018/11/27 08:23