import, requier, app = app || {};, というキーワードを見かけるが、よくわからないので調べてみた。

契機

`<script>`

JavaScriptはモジュール化する仕組みがない。

HTMLで<script>タグを編集し順序を管理する
JSファイルでグローバル変数を使い参照する (app = app || {};)

時代遅れ感。だが、import, requierなどのキーワードをみつけたので、代わりになるかと思って調べてみた。

requier

使ってみたらエラーになった。（2018-04-17 Chromium 51）

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <script>
   var sub = requier('mymodule.js')
    </script>
</head>
<body></body>
</html>

mymodule.js

msg = 'Hello my module !!';
alert(msg);
console.log(msg);

結果

Uncaught ReferenceError: requier is not defined

どうやらNode.jsでないと使えないらしい。だが、ネット上にはブラウザで使っているものも存在した。

一体requier()とは何なのか。どうすればブラウザで使えるのか。

import

importは正式な構文になるらしい。だが、動作しない。まだブラウザに実装されていないらしい。

index.html

...
    import helloworld from 'mymodule.js'
    helloworld();
...

mymodule.js

export var helloworld = function () {
    msg = 'Hello my module !!';
    alert(msg);
    console.log(msg);
};

結果

Uncaught SyntaxError: Unexpected token import

参考

現状、ブラウザではimport, requierどちらも使えない。

使えない

Raspiban 8.0 (jessie) ではimportが使えるような新しいブラウザが使えない。

Firefox

Firefoxは54からimport構文をサポートしている。

だが、Raspiban 8.0 (jessie) ではFirefoxは52までしか使えない。

https://raspberrypi.stackexchange.com/questions/75463/firefox-57-on-a-raspberry-pi?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

$ apt-cache policy firefox-esr
firefox-esr:
  インストールされているバージョン: 52.6.0esr-1~deb8u1
  候補:               52.6.0esr-1~deb8u1
  バージョンテーブル:
 *** 52.6.0esr-1~deb8u1 0
        500 http://mirrordirector.raspbian.org/raspbian/ jessie/main armhf Packages
        100 /var/lib/dpkg/status

ちなみに、インストールしてあるFirefoxはメニューなどが白っぽく表示されてバグってる。日本語表示もされなくなった。

Chromium

Chromiumは60からimport構文をサポートしている。だが、使える最新は56。今は51を使っている。importは使えない。

$ apt-cache policy chromium-browser
chromium-browser:
  インストールされているバージョン: 51.0.2704.91-0ubuntu0.14.04.1.7015
  候補:               56.0.2924.84-0ubuntu0.14.04.1.1000
  バージョンテーブル:
     56.0.2924.84-0ubuntu0.14.04.1.1000 0
        500 http://archive.raspberrypi.org/debian/ jessie/main armhf Packages
 *** 51.0.2704.91-0ubuntu0.14.04.1.7015 0
        100 /var/lib/dpkg/status

結論

ブラウザの機能だけではimport, requierは使えない。

requier.jsなどのライブラリがあるようなので調査してみる。

追記 2019-04-21

　タイポ指摘いただきました。requierでなくrequire。仰るとおりです。

　ちなみにブラウザにはrequireがないのでタイポ修正しても同様のエラーになった。

Uncaught ReferenceError: require is not defined

　のちに新しいChromiumにてimportで解決する。

github

やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

JSのモジュール化をするrequierとimportについて調べたが動作しない

契機