javascript:requirejs

RequireJS - モジュール管理フレームワーク

本家: RequireJS
ソースコード: GitHub - requirejs/requirejs: A file and module loader for JavaScript

今となっては、SystemJS の様な ES6/AMD/CommonJS/UMD のモジュールをサポートしているモジュールローダもあるが、Node.jsBabel のようなトランスパイラを必要とするので、そのようなビルドを必要としない RequireJS は手軽な「モジュール管理フレームワーク」である。
古いブラウザーにも対応しており require.config で細かいモジュール設定が可能である。

index.html

<!DOCTYPE html> <html> <head> <title>My Page</title> <script data-main="scripts/main" src="scripts/require.js"></script> </head> <body> <h1>My Sample Page</h1> </body> </html>

scripts/main.js

require(['jquery', 'ace'], ($, ace) => { console.log($('#contents').html()); self.editor = ace.edit('aceEditor'); editor.setTheme('ace/theme/chrome'); editor.session.setOptions({ mode: 'ace/mode/javascript', tabSize: 2, useSoftTabs: true }); });

<html>
  <script src="/_media/javascript/requirejs/require-2.3.6.min.js?cache=recache"></script>
  <script src="/_media/javascript/requirejs/settings.js?cache=nocache"></script>
</html>

index.html

<!DOCTYPE html> <html> <head> <title>My Page</title> <script src="scripts/require.js"></script> <script src="scripts/settings.js"></script> </head> <body> <h1>My Sample Page</h1> </body> </html>

scripts/settings.js

require.js

// 定義方法 define('DokuWiki', ['axios'], (axios) => { return class DokuWiki { static get CODE_START() { return '<!--[code-start]-->'; } constructor() { this.MEDIA_AJAX_URL = '/lib/exe/ajax.php'; } async getMediaList(ns, grep_) { let grep = !!grep_ ? grep_ : ''; //... } }; // class end }); // define end // 使い方 require(['DokuWiki'], (DokuWiki) => { const dokuWiki = new DokuWiki(); });

classreturn するように記述する。

  • javascript/requirejs.txt
  • 最終更新: 2020/08/30 13:05
  • by ともやん