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

JavaScriptモジュール化の歴史など

今の現場(2017年10月入場)ですが、比較的モダンな技術を使っておりまして、私の場合、特にJavaScriptにカルチャーショックを受けてしました。 現場に入る前はAngularJSなどは独学でやっ …

no image

Angularでのfilter

今回はAnuglarでよく使うfilterという機能です。 使いどころとしては入力フォームに対応させて表示項目を絞る、みたいな使い方が一般的かと思います。 一番簡単なものとしては配列があり、入力値にあ …

no image

package.jsonによるタスクの実行

前回の記事でgulpによるタスクの実行を書きましたが、package.jsonでこれを行うこともできます。 てっきり依存ライブラリの記述だけかと思いますしたが、様々なタスクを実行できるようですね。イメ …

no image

timepickerについて

日付を入力するときに直接、文字入力するのがメンドイことからカレンダーが表示されるプラグインを使っている人は多いでしょう。 私も日頃Datepickerというライブラリを使っています。が、このプラグイン …

no image

複数の非同期処理終了後(when&Promise.all)

JavaScriptで複数の非同期処理(例:API)を走らせて、その非同期処理が全て終わった後で、何らかの処理をしたい時について。 Contents1 when2 Promise_all when j …