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

npmでのJSライブラリインストール&ビルド(※Laravel使用時)

JavaScriptのインストールですが、いままではライブラリを1つ1つインストールしてました。 bowerでインストールしたこともあったんですが、読み込み自体は1つ1つしていました。 先日仕事でnp …

no image

ejsのテンプレート

普段生のHTMLを書く機会はほとんどなく、画面側の仕事でもフレームワークを使うことがほとんどなので搭載されているテンプレートを使っています。 で、生のHTML/CSSの本を読んでいてejsなるテンプレ …

no image

JavaScriptのコールバック関数について

Angularをやるうえで前提となるJavaScriptの知識を書いていこうかと。 関数を変数として扱い、別の関数の引数にできる JavaScriptの特徴の1つとして関数を変数のように扱えるというの …

no image

オートコンプリートのプラグイン

最近だとフォームの入力画面で最初の数文字を入力すると候補を予測して表示してくれる機能(=オートコンプリート)があることが一般的ですね。 いろいろなプラグインがありますが、今回お勧めしたいのはBoots …

no image

PHP(DBアクセス)→HTML→Angularを実行するために

AngularJSでデータベースをつかうときには$httpや$resourceを使うことが多いですが、それ以前にAngularを読み込んでデータベースにアクセスしないことも重要かと思っています。 とい …