require.js构建优化

想摸透javascript模块化编程是怎么一回事，在seajs和requirejs之间兜兜转转，看了许多相关资料和文章，算是大体理清它们的异同，撇开requirejs加载方式的另类（其实目前我暂时还没去感觉），于写法，比较喜欢requirejs的写法，这个比较主观，这也得益于阮一峰大大那篇Javascript模块化编程（三）：require.js的用法，讲得很清楚，反而我看seajs的文档，反而迷迷糊糊。

其实模块化编程不难理解，主要我仍是卡在了构建工具，压缩合并的优化上，虽然seajs官网上有不少相关教程，但我就是不理解，简直被本身蠢哭了。后来看到requirejs上有例子，就决定啃英文教程试一下。

须要用到node和npm，我直接在github上clone了requirejs的例子create-template-master因此能够跳过r.js的安装:

npm install -g requirejs
r.js -o app.build.js

例子已经有build.js，app目录也已经搭建好，因此只须要下面一条命令，就自动帮你构建了。

node r.js -o build.js

build.js是命令行配置参数文件，因此能够把build.js里面的配置参数直接写在上面那条命令的后面。like this：

node r.js -o baseUrl=. paths.jquery=some/other/jquery name=main out=main-built.js

看下build.js里面怎么写：

{
    "appDir": "../www",     //待构建文件目录
    "baseUrl": "lib",       //和require.js里面基目录（baseUrl）同样
    "paths": {              //路径指定，以下用app代替../app  
        "app": "../app"
    },
    "dir": "../www-built",  //构建目标文件目录
    "modules": [            //这个应该是模块配置，name表示入口文件
        {
            "name": "app"
        }
    ]
}

这是构建的log：

能够对比一下构建先后，打开www/index.html和www-built/index.html的js加载有什么不一样。
未构建以前，所有js分开加载。

构建以后，只须要加载require.js和app.js。

构建以后，js已是压缩合并的了，main.js，messages.js和print.js都合并到了app.js里面。

---

css的优化，得再看下require.js的示例，而后再写篇笔记记录下来。