0

知りたいこと

npmというものを使えばJavaScriptライブラリのバージョン管理ができると聞き少しずつ触って見ておりますが、どのようにしてhtmlからそのJavaScriptを呼び出せばいいのかがわからないので知りたいです。

npmはPHPでいうcomposer、Pythonで言うpip、nimでいうnimbleのようなものだと思っております。
ここも間違っていたらご指摘いただけると嬉しいです。

環境

  • Windows 10
  • yarn 1.10.0

やったこと

ひとまずrollup.jsでjQueryを使えるようにしてみようと、以下の準備をしています。

jQueryの追加

yarn add jquery

以下も使うらしいのでとりあえず入れてみる

yarn add rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-babel babel-preset-es2015-rollup @babel/core

これらは以下と認識しております。
こちらも間違っていたらご指摘いただけると幸いです。

  • rollup-plugin-node-resolve
    • node_modules配下のJSファイルを読み込むプラグイン?
  • rollup-plugin-commonjs
    • CommonJSという、サーバサイドで動くJSの規格に変換するプラグイン?
  • rollup-plugin-babel
    • サーバサイドで動くJSの規格をブラウザが認識できる従来のJSに変換するプラグイン?
  • babel-preset-es2015-rollup
    • rollup-plugin-babelを動かすプラグイン…?これはわからない…
  • @babel/core
    • babelの本体…?

参考にしたページ:
(1) コンフィグファイル編 | Rollupがちょうどいい感じ - Qiita


フォルダ構成

画像の説明をここに入力


rollup.config.jsを作成します。

import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';


export default {
    // コンパイル対象JSファイル
    input: [
        './resources/js/jquery.js'
    ],

    // コンパイル済みJSファイルの書き出し先
    output: {
        format: 'cjs',
        dir: './public/js/',
    },

    // コンパイルに利用するオプションと外部プラグイン
    plugins: [
        nodeResolve({jsnext: true}),
        commonjs(),
        babel(),
    ]
}

resources/js/jquery.js ファイルを public/js/jquery.js に書き出そうとしております。


resources/js/jquery.jsファイルは以下のように定義しました。

import $ from 'jquery'

その後、rollupでコンパイルを行いました。

> yarn rollup -c

すると無事、public/js/jquery.jsが出力されました。


HTMLを作成し、先程出力されたpublic/js/jquery.jsを読み込んで実行してみます。

<html>
    <head>
        <!-- 先程rollupjsが出力したJSファイル -->
        <script src="public/js/jquery.js"></script>
    </head>

    <body>
        <div id="hoge"></div>

        <!-- jQueryを使ってみる -->
        <script>
            $(document).ready(function() {
                $('#hoge').text('hello');
            });
        </script>
    </body>
</html>

しかし、上記HTMLファイルにブラウザでアクセスしてみると、

ReferenceError: $ is not defined

のようなエラーが出ております。

これはなぜなのでしょうか?

rollup.config.js中で、

nodeResolve({jsnext: true}), // node_modulesからjqueryを取得
↓
commonjs(),                  // サーバ上で動作するJavaScriptに変換(CommonJSの規約に則った変換)
↓
babel(),                     // ブラウザが認識できるJavaScriptに変換

と行っていると思いますが、実行できない意味がわかりません。

エラー分的には$ is not defined、つまりjQueryの$がないという意味ですが、
コンパイル前のresources/js/jquery.jsimport $ from 'jquery'と読み込んでおります。

この後vue.jsやmaterializeを利用しようと考えておりますが、初手でつまずいてしまい……
このあたり、エラーの理由と解決策、私の認識間違いのご指摘をいただけますと幸いです。
どうぞよろしくお願いいたします。

1 件の回答 1

1

rollupなど、モジュールバンドラでimportした外部リソースは基本的に、明示的に外部から利用できるようにする(たとえばwindow.$=$)などしないとその外からは扱えません。(そもそもビルド時に使用していないimportは無視される気がします。)

さらに言えば、そもそもimportだけをするのではなくアプリのJSコードはバンドルするコード内に書くのが一般的ですし、そうすれば前述のように明示的に外に出す必要もありません。

4
  • ご回答ありがとうございます。大変申し訳無いのですが、前提部分にも記載させていただきましたが、フロントエンドはあまりわかっておらず… 例えば、「明示的に外部から利用できるようにする(たとえばwindow.$=$)などしないとその外からは扱えません」とのことですが、 vuejsなどではどうするのでしょうか? 「window.vue=vue」などになるのでしょうか? Commented 2019年11月11日 16:59
  • 今試しに、「window.$=$」を追記し、コンパイルし直してみるとたしかに実行することができました。 HTMLから実行できるようなJSに変換するにはすべてのライブラリ(例:vuejs, sweet alert, riot, handlebarsなど)をwindows.XXに書いていく必要があるということでしょうか? Commented 2019年11月11日 17:03
  • もしHTML内にコードを書く、現状のようなコードを書く、とするならばそうすることになりますが、それであればRollupを使ってる意味がないですし、なんならunpkg等から読み込んだほうが楽まであります。HTML内にJSコードを書く特別な理由がないのであれば、バンドル内にまとめてしまうべきです。(babelを使ったり、モジュールシステムを活用するにも、あるいはVueのSFCを使うにもそうすべきです。)
    – hinaloe
    Commented 2019年11月11日 17:29
  • ご返信ありがとうございます!なるほどなるほど、少しずつ分かってきました!ありがとうございます! Commented 2019年11月13日 13:53

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。