本番でどう使うかとか、モジュールがどうとかNodeJSがどうとかはどうでもよくて、
いいからとにかくRxJSを動かして、どんなものなのか様子を見たいだけなんじゃ。
#やりたいこと
ここのデモコードに
var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
.subscribe(() => console.log('Clicked!'));
というものがある。(ov02.jsという名前は僕が適当につけたので意味はないです)
Observableが初めて出てくる、とても簡単なコード。これを動かしたい。それだけでいい。まずは。それだけでいい。
ブラウザでボタンをクリックすると、ブラウザのコンソールに「Clicked!」と表示される、ただそれだけ。
ブラウザのコンソールは、例えばChromeなら、適当な所を右クリックして「要素を検証」をクリックして出て来る開発者ツールで、コンソールタブを探せば出てきます。
#問題は何
上のov02.jsと、このov02.htmlを同じフォルダに置いて、ブラウザでov02.htmlを開きます。
<!DOCTYPE html>
<head>
</head>
<body>
<button>button</button>
<script src="./ov02.js"></script>
</body>
var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
.subscribe(() => console.log('Clicked!'));
(ov02.jsは再掲)
当然、動きません。何故なら、RxJS本体を読み込むコードがどこにもないからです。
#結論
CDN経由でRx.min.jsというファイルを入手して、同じフォルダに置いて、普通にHTMLから読み込んで動かすことが出来ました。
修正版のHTMLがこちら。ov02.jsファイルはそのままで大丈夫です。
<!DOCTYPE html>
<head>
</head>
<body>
<button>button</button>
<script src="./Rx.min.js"></script>
<script src="./ov02.js"></script>
</body>
Rx.min.jsというファイルは、このサイトを使って入手しました。
https://cdnjs.com/libraries/rxjs
そもそもこのRxJS、ライブラリなんだから、jQueryと同じように、本体ファイルをHTMLから読み込めば動くんですね。
RxJSを読み込む行は、RxJSを使用するJSファイルを読み込む行よりも上に書きましょうね。先に読み込まないといけないですからね。
いやあ、なんか、NodeJSを使ってimportやらrequireするものだっていう先入観があって、遠回りしてしまった。
CDNというのは、「コンテンツデリバリーネットワーク」のことで、めちゃくちゃ簡単に言うと、コンテンツを受け取る側にとっては「ファイルが入手できる所」くらいの意味です。
いやもっとメリットあるんですけど、とにかく、「CDNにアクセスすると、ファイルが手に入る」ということです。
CDN使う方法も本家サイトに書いてあったけど、なんか「CDN」ってアルファベットで言われた瞬間「何かのインストーラかな。入れてないな〜」とか思っちゃったんですよね。情弱すぎる。
#nodeで動かすなら
ブラウザではなく、ターミナルなどを使ってnodeコマンドで動かす場合はこちら。
Rx = require('./rx.min.js');
Rx.Observable.of(1,2,3).subscribe(x=>console.log(x));
JSファイルの冒頭でrequireを使って読み込んでやれば動きます。
node ov06.js
1
2
3
#以下、遠回り中のぼやき
以下、ぼやきです。役に立つことは書いてません(なんですって…！)
そもそも、元のov02.jsにimport文を足してhtmlから読み込んで試そうと思ったらハマった。
俺のバージョンのchrome(64.0)はjavascriptのモジュール機能に対応してるらしいからいけるのかと思ってしまった。
###importやrequireはブラウザのコンソールからは使えない
importしたいモジュール(?)をコンソールから呼ぶことは出来ない
###普通にJSを読み込んでもimportやrequireはうまく動かない
import { hoge } from ...
は、unexpected token "{" って怒られる。"import"の時点で怒られてるわけではないのか。
import Rx from ...
とすると、unexpected identifier らしい。はあ。
###ブラウザはnode_modulesに対応していない
import Rx from... がダメなのはこのせいか？
###ローカルからモジュールのインポートはできない
html側を
<script type="module" src="./hoge.js"></script>
とすると、CORSポリシーに反するということで怒られる。
hoge.js自体はモジュールとして記述してるわけじゃないんだけど、どうなんだ？
その冒頭にあるimport文がまずいのか？？
まあnode_modulesに対応してないんじゃ結局だめだけど。
###バンドラ(?)とかいう謎概念を使えば良い？？
確かに、Angularのテストサーバーを動かすと、webpackがどうこういうメッセージがでる。
webpackは一体どんな仕事をしているんだ。わかってないぞ。
###CDNからRx.min.jsを手に入れてHTMLから普通に読みこむ
うまくいきましたわ。