なぜrequire又はimportができない？！(a.k.awebpack投入の理由)

0. 当時の環境

C:\git\keepOnEye_money>node -v
v12.18.4
C:\git\keepOnEye_money>npm -v
6.14.6

エラーモメント

ライブラリーをインストールは無事完了。

C:\git\keepOnEye_money>npm install pinyin

> nodejieba@2.5.2 install C:\git\node_modules\nodejieba
> node-pre-gyp install --fallback-to-build

[nodejieba] Success: "C:\git\node_modules\nodejieba\build\Release\nodejieba.node" is installed via remote
npm WARN saveError ENOENT: no such file or directory, open 'C:\git\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\git\package.json'
npm WARN git No description
npm WARN git No repository field.
npm WARN git No README data
npm WARN git No license field.

+ pinyin@2.10.2
added 60 packages from 97 contributors and audited 306 packages in 10.529s

19 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

ドキュメントのサンプールコードを叩いてみよう。

app.js

var unirest = require('unirest');

でも画面では効かないよう、、

Uncaught ReferenceError: require is not defined

原因はCommonJSとes6の違い（と思いきや違ったことを後でわかる）

とても親切な説明がありまして貼っておくと、
https://zenn.dev/naoki_mochizuki/articles/46928ccb420ee733f78f

要するに
commonJS: requireが
es06: importで使うことになる
なので特にどっちを選んでも機能は同じのこと。

試しにimportに変えてみた。

app.js

import unirest from 'unirest';

Uncaught SyntaxError: Cannot use import statement outside a module
モジュール関係の問題らしい、、

webpackの登場。

簡単に言いますと、散らかっているモジュルを一つにまとめてくれるもの。開発環境とブラウザーは環境が違うため、ブラウザーで表現したい機能の実現のために開発環境から必要道具（？）をまとめて送る必要がある。
袋みたいに一つにまとめるものの認識。

webpackをセットアップしてみよう。

npm init
npm i -D webpack webpack-cli

上記のコマンドを作成してwebpack.config.jsを生成、中身を埋める。

const path = require('path');

module.exports = {
    mode: 'production', // or "development" or "none",
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'),
    },
    entry:{
        main : "./app.js"
     },
  };

HTMLのjsパスをOUTPUTのパスに修正する。

index.html

    <!-- <script src="app.js"></script> -->
    <script src="./dist/bundle.js"></script>

package.jsonへwebpack実行用コマンドを追加する。

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

最後に確認用コードを追加してみる

app.js

var pinyin = require("pinyin");

console.log(pinyin("中心"));

それでは実行してみようー！

npm run build

できました！！

なぜlibraryのrequire(import)が効かなかった？はnode.js はサーバーの言語なのでfrontのブラウザーと話すことがが違う

とのことでした。今のエラーはnode.jsのみの環境だと問題なしと思われて、画面側に持ち出した時の問題だったこと！