質問: ひとまず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の本体...? コピペさせていただいたページ:こちら --- フォルダ構成 ![画像の説明をここに入力](https://i.stack.imgur.com/KfC1f.jpg) --- 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ファイルにブラウザでアクセスしてみると、 ``` 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.js`で`import $ from 'jquery'`と読み込んでおります。 この後vue.jsやmaterializeを利用しようと考えておりますが、初手でつまずいてしまい...... このあたり、エラーの理由と解決策、私の認識間違いのご指摘をいただけますと幸いです。 どうぞよろしくお願いいたします。
回答: rollupなど、モジュールバンドラでimportした外部リソースは基本的に、明示的に外部から利用できるようにする(たとえば`window.$=$`)などしないとその外からは扱えません。(そもそもビルド時に使用していないimportは無視される気がします。) さらに言えば、そもそもimportだけをするのではなくアプリのJSコードはバンドルするコード内に書くのが一般的ですし、そうすれば前述のように明示的に外に出す必要もありません。