Node.jsでモジュールを読み込んでどうやってHTMLで使用するのか？

Question

Node.jsでモジュールを読み込んでどうやってHTMLで使用するのでしょうか？
Node.jsはサーバーサイドだから、フロントサイドでは直接使用できないですよね？

例えば、Vue.jsを使いたい場合、
自分は、htmlで以下のようにCDNを書くか、JSファイルをダウンロードして使います。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

これで、問題なくうまくいくのですが、ここのサイトで、
https://jp.vuejs.org/v2/guide/installation.html

$ npm install vue

と書いてあるのは、
npmでインストールして、どうやってHTMLで使うのでしょうか？

試しにHTMLで読み込んでいるJSファイルに書いてみたのですが、エラーになってしまいました。

// CommonJS require
const Vue = require("vue");  //require is not define エラー

Answer 1

その文言の直後に答えが書いてあります。

Vue.js による大規模アプリケーションを構築するときには、NPM を利用したインストールを推奨しています。 Webpack または Browserify のようモジュールハンドラとうまく組み合わせられます。（Vue.jsのサイトより）

ブラウザから直接は使えないので、「Webpack または Browserify のようモジュールハンドラ」を使って、ブラウザで使えるJavaScriptファイルを生成する、という流れです。

Comments

[退会済みユーザー]

ありがとうございます。モジュールハンドラ用とはハッキリと書かれていなかったため、もしかするとhtmlで直接使えるのかと思ったのですがそうではなかったのですね。

Answer 2

Vue.js による大規模アプリケーションを構築するときには、NPM を利用したインストールを推奨しています。

要は「大規模だったらわたし達npm推しだから皆もnpmでインストールしてね」ってことです。
利用方法についてはこちらが参考になるかと

Comments

[退会済みユーザー]

ありがとうございます。
教えていただいたサイトを見てみます！ー

[kyoya0819]

低評価をされた方、無言でつけないでいただけるとありがたいです。