JS模块化规范AMD之RequireJS

Posted 2020-08-17

 

1.基本操作

1. 加载 javascript 文件（入口文件）

   RequireJS以一个相对于baseUrl的地址来加载所有的代码

   <script data-main="scripts/main.js" src="scripts/require.js"></script>
   

2. 相关配置

   requirejs.config({
   
       baseUrl: ‘js/lib‘,
   
       paths: {
           app: ‘../app‘
       }
   });
   
   requirejs([‘jquery‘, ‘canvas‘, ‘app/sub‘],
   function   ($,        canvas,   sub) {
       //jQuery, canvas and the app/sub module are all
       //loaded and can be used here now.
   });
   

2.模块相关

1. 简单的值对

   define({
   
       color: "black",
       size: "unisize"
   });
   

2. 没有任何依赖的函数式定义

   define(function () {
   
       return {
           color: "black",
           size: "unisize"
       }
   });
   

3. 存在依赖的函数式定义

   define(["./cart", "./inventory"], function(cart, inventory) {
           //return an object to define the "my/shirt" module.
           return {
               color: "blue",
               size: "large",
               addToCart: function() {
                   inventory.decrement(this);
                   cart.add(this);
               }
           }
       }
   );
   

4.将模块定义为一个函数

    define(["my/cart", "my/inventory"],
        function(cart, inventory) {

            return function(title) {
                return title ? (window.title = title) :
                       inventory.storeName + ‘ ‘ + cart.name;
            }
        }
    );

3.简单包装CommonJS来定义模块

define(function(require, exports, module) {
    var a = require(‘a‘),
        b = require(‘b‘);

    //Return the module value
    return function () {};
    }
);

4. 定义一个命名模块(jquery中使用)

define("foo/title",
    ["my/cart", "my/inventory"],
    function(cart, inventory) {
        //Define foo/title object in here.
   }
);

jquery:

if ( typeof define === "function" && define.amd ) {
    define( "jquery", [], function() {
        return jQuery;
    } );
}

5.JSONP服务依赖

为了在RequireJS中使用JSON服务，须要将callback参数的值指定为"define"。这意味着你可将获取到的JSONP URL的值看成是一个模块定义。

下面是一个调用JSONP API端点的示例。该示例中，JSONP的callback参数为"callback"，因此"callback=define"告诉API将JSON响应包裹到一个"define()"中：

require(["http://example.com/api/data.json?callback=define"],
    function (data) {
        //The data object will be the API response for the
        //JSONP data call.
        console.log(data);
    }
);

仅支持返回值类型为JSON object的JSONP服务，其他返回类型如数组、字串、数字等都不能支持。

6.压缩合并

1. 常规压缩合并

   node r.js -o baseUrl=js name=main out=built.js
   

   有外部CDN的情况

   //表示paths.jquery不参与合并，压缩。这时生成的built.js
   node r.js -o baseUrl=js name=main out=built.js paths.jquery=empty:  也就不包含它了。
   

   合并成大文件，设置配置文件

   ({
       appDir: "./",
       baseUrl: "js",
       dir: "../r6-built",
       paths: {
           jquery: ‘empty:‘
       },
       modules: [
           {
               name: "page1"
           },
           {
               name: "page2"
           }
       ]
   })
   

   命令

   node r.js -o build.js
   

2. 合并压缩CSS

   node r.js -o cssIn=css/main.css out=css/built.css
   

   还可以使用optimizeCss参数设置来配置是否压缩及压缩选项。

   optimizeCss的取值有

   none  不压缩，仅合并
   
   standard  标准压缩 去换行、空格、注释
   
   standard.keepLines  除标准压缩外，保留换行
   
   standard.keepComments  除标准压缩外，保留注释
   
   standard.keepComments.keepLines  除标准压缩外，保留换行和注释
   

   示例：

   node r.js -o cssIn=css/main.css out=css/built.css optimizeCss=standard
   

   压缩后built.css整个为一行了。