parcelのローカルサーバーにおいて外部JSファイルから読み込んだ変数が「Uncaught ReferenceError」になる

html内にscriptタグを設置し、その中の処理で外部jsファイルで定義した変数を利用したいと思っています。

該当の処理としては以下の通りです。

js
1/* ./outer.js */
2var data = { id: 1};
3console.log('read outer.js');

html
1...
2<!-- ./index.html -->
3<script src="./outer.js"></script>
4</head>
5<body>
6  <div>test</div>
7  <script>
8  $(() =>{
9    console.log('data');
10  })
11...

上記ファイルの確認を行うためにMacのターミナルから下記コマンドでparcelのローカルサーバーを起動しました。

bash
1$ parcel index.html
2Server running at http://localhost:1234 
3✨  Built in 55ms.

しかし、http://localhost:1234にアクセスするとchromeデバッグツールのコンソール上に

read outer.js

Uncaught ReferenceError: data is not defined
    at HTMLDocument.<anonymous> ((index):19)
    at e (jquery-3.4.1.min.js:2)
    at t (jquery-3.4.1.min.js:2)

という内容のメッセージが出てエラーとなっていました。

一方parcelを利用せずに、直接index.htmlをブラウザで開いた場合は上記エラーは表示されず、dataの中身がコンソール上に表示されました。

解決策としては外部ファイル上で全てのJS処理を行えば問題ないのですが、なぜparcelのローカルサーバーとindex.htmlを直接ブラウザで開いた場合とでなぜ上記のような差異が出るのかが気になっております。

上記の現象について原因がお分かりの方がいらっしゃれば、ご回答頂けますと幸いです。
よろしくお願いします。