zoukankan      html  css  js  c++  java

  • 转载 r.js打包经验

    例子1

    先是HTML页面

    <!DOCTYPE html>
    <html>
        <head>
            <title>My App</title>
            <link rel="stylesheet" type="text/css" href="css/main.css">
            <script data-main="scripts/main-built" src="scripts/require.js"></script>
        </head>
        <body>
            <h1>My App</h1>
        </body>
    </html>

    js都放在scripts目录下，换言之 html与scripts是平级。此目录下有r.js, require.js, one.js, two.js, three.js, main.js

    上面HTML提到的main-built.js是一会儿动态生成的。

    r.js 可以在这里找到https://github.com/jrburke/r.js/blob/master/dist/r.js，总共7MB，非常疯狂！听说把各种情况都hold住了， 比spm强大多了！

    接着是几个JS的内容：

    one.js

    define(function(){
        return 1
    })

    two.js

    define(function(){
        return 2
    })

    three.js

    define(function(){
        return 3
    })

    main.js

    require(["one", "two", "three"], function (one, two, three) {
        alert(one+two+three)
    });

    好了，我们再看一下build.js如何写

    ({
        baseUrl: ".",
        name: "main",
        out: "main-built.js"
    })

    定位到此目的，执行node r.js -o build.js

    最后生成main-built.js文件，我格式化它一下，里面内容如下：

    define("one",[],function(){return 1}),
    define("two",[],function(){return 2}),
    define("three",[],function(){return 3}),
    require(["one","two","three"],function(e,t,n){alert(e+t+n)}),define("main",function(){});

    最后运行服务器，发现真的能alert出6！

    可以点击这里看看

    例子2

    就是在上面的例子里面改一下

    其他变化如下：

    three.js放到sub目录下，内容改成：

    define(["./two"], function(a){
        return 1 + a
    })

    one.js

    define(["./two"], function(a){
        return 1 + a
    })

    main.js改成

    require(["one","sub/three"], function (one,  three) {
        console.log(one + three)
    })

    执行r.js，生成main-built.js为：

    define("two", [], function() {
        return 2
    }), define("one", ["./two"], function(e) {
        return 1 + e
    }), define("sub/three", [], function() {
        return 30
    }), require(["one", "sub/three"], function(e, t) {
        console.log(e + t)
    }), define("main", function() {
    });

    下面合并前后的请求数比较

    例子3， paths配置项的使用

    目录结构改成这样，jquery自行到官网下载

    main.js改成这样

    require.config({
        paths: {
            jquery: "jquery/jquery-1.11.2"
        }
    })
    require(["one", "sub/three","jquery"], function(one, three, $) {
        console.log(one + three)
        console.log($)
    });

    main.js改成这样

    ({
        baseUrl: ".",
        name: "main",
        paths: {
            jquery: "jquery/jquery-1.11.2"
        },
        out: "main-built.js"
    })

    然后执行node r.js -o build.js打包命令，生成的文件就可以用了。并且发现r.js有个非常智能的地方，如果把main.js中的require语句的依赖项中的jquery去掉，再执行打包，它会将jquery源码从main-built.js中去掉。

    可以点击这里看看

    例子4, 让生产环境用的脚本放在另一个文件中

    我们通常把我们自己工作的环境叫做发展环境， 上线的环境叫生产坏境，将它们分开是非常有好处的。我们把上面的目录复制一下，改一名字：

    相对而言， 页面也改一下

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>My App</title>
            <link rel="stylesheet" type="text/css" href="css/main.css">
            <script data-main="develop/main-built" src="develop/avalon.js"></script>
            <!--    <script data-main="develop/main" src="develop/avalon.js"></script>-->
            <!--    <script data-main="develop/main-built" src="develop/require.js"></script>-->
        </head>
        <body>
            <h1>My App</h1>
        </body>
    </html>

    打包的脚本build.js变成这样，

    ({
        baseUrl: ".",
        paths: {
            jquery: "jquery/jquery-1.11.2"
        },
        dir: "../production",
        name: "main"
    })

    对比一下，有了dir，就不能使用out配置项了，你在编译时它有非常明确的提示。执行node r.js -o build.js打包命令，你的项目变成这样了

    既然目录变了，我们有两个办法，1自己修改或通过脚本修改index.html引用脚本的路径，2后端配置一下，对请求进行重定向，我们通常是使用后面一种。

    可以点击这里看看

    例子5, shim配置项的使用

    在例子4里面jquery目录添加一个jquery.aaa.js，内容如下：

    jQuery.fn.aaa = function(){
        alert("aaa")
    }

    main.js改成

    require.config({
        paths: {
            jquery: "jquery/jquery-1.11.2",
            aaa: "jquery/jquery.aaa"
        },
        shim: {
            aaa: {
                deps: ["jquery"],
                exports: "jQuery"
            }
        }
    })
    require(["one", "sub/three", "aaa"], function(one, three, $) {
        console.log(one + three)
        console.log($.fn.aaa)
    })

    build.js也跟着改成

    require.config({
        paths: {
            jquery: "jquery/jquery-1.11.2",
            aaa: "jquery/jquery.aaa"
        },
        shim: {
            aaa: {
                deps: ["jquery"],
                exports: "jQuery"
            }
        }
    })
    require(["one", "sub/three", "aaa"], function(one, three, $) {
        console.log(one + three)
        console.log($.fn.aaa)
    })

    然后执行node r.js -o build.js打包命令，生成的文件就可以用了。

    可以点击这里看看

    如果大家还有更好的打包方式， 可以https://github.com/avalonjs/avalonjs.github.io/tree/master/zh/engineering ,添加到这里，pull request给我

    转载来源：http://www.cnblogs.com/rubylouvre/p/4262569.html
  • 相关阅读:
    SQL SERVER中变量的定义、赋值与使用
    框架设计总结
    Sass学习之路(5)——变量
    gulp入坑系列(4)——gulp的代码转换
    gulp入坑系列(3)——创建多个gulp.task
    Sass学习之路(4)——不同样式风格的输出方式
    Sass学习之路(3)——Sass编译
    gulp入坑系列(2)——初试JS代码合并与压缩
    gulp入坑系列(1)——安装gulp
    Sass学习之路(2)——Sass环境安装（windows版）
  • 原文地址：https://www.cnblogs.com/sunshq/p/4511717.html
Copyright © 2011-2022 走看看