r.js实践

r.js合并实践

项目中用到require.js做生产时模块开发,但上线要合并压缩,幸好它配套有r.js。下面就其用法说明一下。

首先建一个目录,里面的结构如下:

r.js实践

  • require.js可以到r.js项目下载
  • r.js可以到r.js项目下载
  • server.exe可以到avalon项目下载
  • jquery可以到JQ官网下载
  • avalon.js可以到avalon项目下载,并把里面的loader: true改为 loader: false,禁止自带的加载器。
  • main.js是用于配置加载选项的,如shim机制,有时还做一些初始化操作。
  • build.js是用于合并压缩的。

index.html的内容如下:

<!doctype html>

<html>

    <head>

        <title>avalon+requirejs</title>

        <meta charset="utf-8">

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

        <style type="text/css">

            .wrapper {

                width: 200px;

                height: 200px;

                background: gray;

            }

        </style>

    </head>

    <body>

        <div class="wrapper" ms-controller="xxx">{{str}}</div>

    </body>

</html>

main.js的内容以下:

require.config({

    baseUrl: 'js',

    paths: {

        jquery: 'jquery',

        avalon: 'avalon'

    },

    shim: {

        jquery: {

            exports: "jQuery"

        },

        avalon: {

            exports: "avalon"

        }

    }

});



require(['avalon',"jquery"], function(avalon, Q) {

   Q("body").append("test jq")

   avalon.define("xxx", function(vm){

       vm.str = "加载成功"

   })

   avalon.scan()

});

 

因为main.js是相当于require.js的下一级目录中,需要设置baseUrl。由于avalon与jquery都不是根据严格的AMD定义它的库的结构(即,没有用define方法包裹起来),我们需要通过shim机制处理一下。最后,我们还手动加载avalon,进行扫描绑定!

然后点击 server.exe,打开IE或chrome。页面加载,它就会加载require.js。require.js会找到加载它的那个script节点,发现它定义了data-main属性,根据它的值去加载js/main.js文件,然后它配置自身,然后加载avalon并完成页面的重新渲染!

我们再来看合并压缩。打开build.js,里面的内容如下:

({

    baseUrl: '',

    paths: {

        jquery: 'jquery',

        avalon: 'avalon'

    },

    shim: {

        jquery: {

            exports: "jQuery"

        },

        avalon: {

            exports: "avalon"

        }

    },

    name: "main",

    out: "main-built.js"

})

你想r.js做压缩,还有一个必要条件,得安装node.js,这个不详谈了,自己百度谷哥。然后要安装r.js,window下打开控制台,输入npm install -g requirejs。然后定位到js目录下,输入node r.js -o build.js,然后该目录下就会多出main-built.js这个文件,表示合并成功!

r.js实践

然后上线时,将index.html中 data-main="js/main"改成 data-main="js/main-built"就行了。

build.js用到的配置项,英文文档可见这里

如果您觉得这文章对您有帮助,可以打赏点钱给我,鼓励我继续写博,我的支付宝

 
 
 
标签:  javascript

你可能感兴趣的:(JavaScript)