知りたいこと
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.js
でimport $ from 'jquery'
と読み込んでおります。
この後vue.jsやmaterializeを利用しようと考えておりますが、初手でつまずいてしまい……
このあたり、エラーの理由と解決策、私の認識間違いのご指摘をいただけますと幸いです。
どうぞよろしくお願いいたします。