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规范的流程就是这样的，只要大家多去用了几次，就熟悉了。
