Require.js配置全局和配置非amd規範JS
- 2020 年 2 月 19 日
- 筆記
我們來說全局配置，我們知道導入require.js之後會設置data-main屬性來執行入口文件，然後再入口文件中進行require的配置。
但是比如我們有五個頁面，data-main="main.js"，那五個頁面都要導入這個main.js，因為main.js中有配置資訊，但是我們五個頁面的頁面js都必須要寫在main.js中了，這樣反而不好，那有什麼辦法呢？
全局配置方案：
我們把配置資訊單獨寫一個js文件，然後再main.js中通過require函數配置依賴項來解決，程式碼如下。
config.js:配置文件
require.config({ baseUrl: 'js', paths: { jquery: 'lib/jquery-3.4.1.min', module1: 'script/module1', module2: 'script/module2', module3: 'script/module3', normal:'script/normal' }, });
然後再main.js文件中，導入此文件即可，程式碼如下：
main.js:入口文件
require(['/js/lib/config.js'], function () { require(['jquery', 'module1', 'module2', 'module3'], function ($, module1, module2, module3) { $("#module1").click(function () { module1.fun("module-1"); }); $("#module2").click(function () { module2.fun("module-2"); }); $("#module3").click(function () { module3.fun("module-3"); }); }) })
這樣就實現配置就是單獨的js文件了，我們要使用的時候用require添加config.js的依賴，就可以了。
可以根據上篇的程式碼來對比一下有什麼不同。
配置非AMD規範JS：
我們知道要配置模組，js文件必須要使用AMD規範來編寫，就是加上define函數，主動返回函數等操作。
但是我們以前編寫的js，肯定沒有這些功能，修改起來又比較麻煩，所以需要配置非AMD規範的JS。
需要配置shim屬性，程式碼如下：
config.js程式碼：
require.config({ baseUrl: 'js', paths: { jquery: 'lib/jquery-3.4.1.min', module1: 'script/module1', module2: 'script/module2', module3: 'script/module3', normal:'script/normal' }, shim: { normal: { deps: ['jquery'],//依賴項 init: function () { return { render: render, initial: initial }//normal里的函數 } } } });
normal.js程式碼：
function render(name) { console.log(name); } function initial(name) { console.log(name); }
這裡面的normal就是非AMD規範的js，我們先在paths中把路徑，名稱配置好，然後再shim中配置對外返回的函數和變數等，比如上面就返回normal.js中的render和initial兩個函數。
然後調用還是按照以前的方法一樣，程式碼如下：
main.js程式碼：
require(['/js/lib/config.js'], function () { require(['jquery', 'normal'], function ($, normal) { normal.render("render"); normal.initial("initial"); }) })
配置全局屬性和配置非AMD規範的流程就是這樣的，只要大家多去用了幾次，就熟悉了。
