====== RequireJS - モジュール管理フレームワーク ====== 本家: [[https://requirejs.org/|RequireJS]]\\ ソースコード: [[https://github.com/requirejs/requirejs|GitHub - requirejs/requirejs: A file and module loader for JavaScript]]\\ \\ 今となっては、[[https://github.com/systemjs/systemjs|SystemJS]] の様な ES6/AMD/CommonJS/UMD のモジュールをサポートしているモジュールローダもあるが、[[https://nodejs.org/ja/|Node.js]] や [[https://babeljs.io/|Babel]] のようなトランスパイラを必要とするので、そのようなビルドを必要としない RequireJS は手軽な「モジュール管理フレームワーク」である。\\ 古いブラウザーにも対応しており **require.config** で細かいモジュール設定が可能である。\\ ===== 使い方 ===== **index.html**\\ %%

My Sample Page

%% **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 }); });%% ==== DokuWiki に埋め込む方法 ==== ===== settings.js を書く方法 ===== **index.html**\\ %%

My Sample Page

%% **scripts/settings.js**\\ settings.js にエラーがあります！！ ===== RequireJS のコード ===== **require.js**\\ ===== ES6 class を RequireJS で定義する方法 ===== %%// 定義方法 define('DokuWiki', ['axios'], (axios) => { return class DokuWiki { static get CODE_START() { return ''; } 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(); });%% ※**class** を **return** するように記述する。\\ ===== 参考文献 ===== [[https://jsprimer.net/basic/module/|ECMAScriptモジュール · JavaScript Primer]]\\ [[https://qiita.com/kami_zh/items/f093c34906d14ba65ad3|JavaScriptのモジュールシステムに関するまとめ - Qiita]]\\ [[https://stackoverflow.com/questions/49631520/how-to-integrate-es6-module-syntax-in-requirejs-project|javascript - How to integrate ES6 Module syntax in RequireJS project - Stack Overflow]]\\