使用require.js构建优化项目实践

尝试用本身主页的简单代码构建优化下。
在文件夹requirejs-optimizer下新建三个文件夹：tools，www和www-built。tools存放r.js和build.js，www放须要构建的项目代码，www-built为构建目标文件夹。

www下代码结构：

js/main-index.js为require.js的入口文件：

requirejs.config({
    paths:{
        jquery: 'jquery.min',
        pikachoose: 'jquery.pikachoose'
    },
    shim:{
        pikachoose:{
            deps: ['jquery'],
            exports: 'PikaChoose'
        }
    }
});

requirejs(['jquery','pikachoose'],function($,pikachoose){
    $("#pikame").pikachoose({
        showCaption: false,
        transition: [7,7,8],
        animationSpeed: 1500
    });
    $("#pikame2").pikachoose({
        showCaption: false,
        transition: [8,7,7],
        animationSpeed: 1500
    });
});

本来jquery我是使用CDN的，构建以后出错了，提示jquery is not defined，是由于pikachoose依赖于jquery，若是使用CDN，须要确保jquery比pikachoose先加载，但我还未找到要如何设置，因此先把jquery下载到本地，和pikachoose一块儿构建。
tools/build.js的配置信息：

{
    appDir: "../www", 
    baseUrl: "js",
    paths: {
        jquery: "jquery.min",
        pikachoose: "jquery.pikachoose"
    },
    shim: {
        pikachoose: {
            deps: ["jquery"],
            exports: "PikaChoose"
        }
    },
    dir: "../www-built",
    optimizeCss: "standard", //css优化参数设定
    modules: [
        {
            name: "main-index"
        }
    ]
}

详细的build.js配置能够参考example.build.js，有很详细的介绍每一个参数的配置状况。我另一篇博文require.js构建优化有简单说了下，构建的命令，其实上require.js的官网，看api有更详细的内容。构建后www-built目录下的内容：

和www目录结构同样，除却js和css，其余格式的文件和文件夹从www拷贝过来，不一样的是，css样式文件内容被压缩，main-index.js配置下用到的模块依赖压缩合并到main-index.js中。