skillup

技術ブログ

JavaScript

requirejsでのモジュール読み込み

投稿日:

JavaScriptのモジュール化では2019年5月現在ではwebpackなどを使うことが一般的かと思いますが、以前はrequire.jsなどというライブラリがあったようです。

例えば下記のようなファイル構成だったとします。

この場合、下記のようなファイルで読み込めます。

require.jsは下記よりDLしましょう。(CDNでもOK)

https://requirejs.org/docs/download.html

sample.html

libs/dateutil.js

*strutil.jsも同一の構成です。

main.js

こんな感じで、複数のJSファイルを読み込めます。

昔、Angularをやった時にこんな構成がありましたね・・

他にも、設定ファイルを使う方法やビルドして一気にmain.jsにファイルを集める方法などあります。

ソースURL

https://github.com/umanari145/library/tree/master/requirejssamp

参考URL

RequireJS使い方メモ

【RequireJS】使い方メモ

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Angular概論 モジュール、コントローラー、スコープなど

Contents1 Angularインストール2 ソース2.1 モジュール、スコープとコントローラ2.1.1  モジュールとは2.1.2 コントローラーとは2.1.3 スコープとは3 参考リンク An …

no image

途中入力離脱防止処理 JavaScript

WordPressの入力画面なんかでは実装されていますが、途中で文字入力をしてページりだすをしようとするとブラウザのアラートがでます。これも一般のお問い合わせフォームなんかでも実装可能です。 この場合 …

no image

非同期通信のまとめ($.ajax,fetch,axiosなど)

非同期通信処理に関して、年明けに少し調べたのでメモします。 非同期通信に関しては長い間、$.ajaxを使っておりました。 フロント側でそれほど複雑な処理をやらなかった、昔覚えたのでそのまま・・ってパタ …

no image

vue-routerについて

vueでのルーティングに関して。 Vueの場合、いわゆるSPA(シングルページアプリケーション)という用途で使われることがあると思います。 ただその場合でも擬似的なルーティング(URLの切り替えなどに …

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …