60420


# 知りたいこと

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

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

# 環境

  * Windows 10
  * yarn 1.10.0

# やったこと

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

jQueryの追加

[code]

    yarn add jquery
    
[/code]

* * *

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

[code]

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

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

  * 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](https://qiita.com/cognitom/items/e3ac0da00241f427dad6#1-%E3%82%B3%E3%83%B3%E3%83%95%E3%82%A3%E3%82%B0%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E7%B7%A8)

* * *

フォルダ構成

[![画像の説明をここに入力](https://i.stack.imgur.com/KfC1f.jpg)](https://i.stack.imgur.com/KfC1f.jpg)

* * *

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

[code]

    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(),
        ]
    }
    
[/code]

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

* * *

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

[code]

    import $ from 'jquery'
    
[/code]

* * *

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

[code]

    > yarn rollup -c
    
[/code]

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

* * *

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

[code]

    <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>
    
[/code]

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

[code]

    ReferenceError: $ is not defined
    
[/code]

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

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

rollup.config.js中で、

[code]

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

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

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

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


CC BY-SA 4.0
2019-11-11T16:26:43.080
60419
2023-01-19T04:02:12.303
2023-01-19T04:02:12.303
3060
31257
question
jquery vue.js npm yarn rollupjs
npmで取得したJavaScriptライブラリ (rollup.js) をHTMLから呼び出す方法


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

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


CC BY-SA 4.0
2019-11-11T16:40:18.927
60420
2019-11-11T16:40:18.927
2376
60419
answer