压缩JS文件

只需要执行这个命令即可

spm build xxx.js

这时候你将得到一个压缩过的__build/xxx.js文件

合并JS文件

如果希望将JS文件中require的其他模块都合并到这个文件中,我们可以加上--combine参数
另外记得这时候必须传递--app_url参数,用于生成module的id,如

spm build xxx.js --combine --app_url http://x.com

你将与上面一样得到一个__build/xxx.js文件,但是这个js中require的模块也都合并在这个文件中了

合并JS文件的规则

一般说来,前端优化时,并非链接数越少越好,对于通用JS类库,由于在多个页面中都会被引用,单独加载可以利用到浏览器缓存

spm在合并时,也考虑到了这种情况,因此它遵循这样一个规则,即只合并require的“相对标识”的模块,而不合并require的“顶级标识”的模块
对“相对标识”和“顶级标识”不了解的参见http://seajs.com/docs/zh-cn/module-identifier.html

为什么是这样一条规则呢?因为seajs的作者推荐使用这样一条规则来require模块:
“推荐使用 require('xxx') 这种方式引用通用类库,使用 require('./xx') 或 require('../path/to/yy') 引用业务模块”

所以,spm在合并时,不会合并通用类库的模块,而判断是否是通用类库的依据就是“相对标识”与“顶级标识”,因此这也要求我们在书写代码时,需要遵守以上的规则

强制合并通用类库

某些特殊情况下,我们希望将通用类库也合并进来,当然最简单的办法就是在代码中使用“相对标识”来require通用类库,不过这个办法实在太蠢
而且spm也有相应的处理方案,我们需要添加--combine_all参数,但是这时候我们还必须传递--base_path参数,指定通用类库所在的文件夹,也就是seajs的base路径
命令参考如下

spm build xxx.js --combine_all --app_url http://x.com --base_path ./lib/

输出文件路径

默认情况下,spm会把文件输出到当前文件同级的__build子文件夹下,在以上几点的例子里面已经看到了
spm也支持用--out_path参数自定义路径,而且如果有同名文件的话会自动覆盖,这点在部署时候做自动化替换很有用
命令参考如下

spm build xxx.js --combine --app_url http://x.com --out_path .

以上命令会将当前的xxx.js替换为合并后的

app_path参数

以上的讨论,都是假设JS文件位于“根”下面,也就是说
假设js在文件系统的目录为D:\project\xxx.js,而未来部署后,访问路径为http://x.com/xxx.js
那么进入D:\project目录,执行spm build xxx.js --combine --app_url http://x.com命令,这时候build出的文件是没有问题的

下面考虑一下复杂的情况:
假设js在文件系统中位于D:\project\javascript\xxx.js,而部署后,访问路径为http://x.com/javascript/xxx.js
那么如果我们进入D:\project\javascript目录,执行上述同样命令,这时候build出的文件是有问题的,哪里有问题呢?打开build出的文件一看就知道了
一般这时候文件中define的id语句是这样的

define("http://x.com/xxx.js", //省略

明显这是有问题,我们期望编译出的id应该是http://x.com/javascript/xxx.js,假设路径再深一点,如果存在两个同名而目录不同的js,就会存在define id重复了
那么如何解决呢?我发现spm还提供一个--app_path参数,尝试执行以下命令,将项目的“根”路径做为--app_path参数

cd D:\project
spm build javascript\xxx.js --combine --app_url http://x.com --app_path D:\project --out_path .

这时候因为out_path为. 所以xxx.js已经被替换掉了,打开发现define id正确无误,是http://x.com/javascript/xxx.js
这是因为当传递了--app_path参数时,spm会计算要合并的js文件的路径与这个路径的相对路径,举例来说,就是计算出D:\project\javascript\xxx.js与D:\project的相对路径,也就是javascript\xxx.js,然后将这个路径再与--app_url参数连接,作为define的id

注意:但是这里有个问题,如果不指定--out_path时,spm会出错,因为这时候--out_path默认为D:\project\javascript_build\javascript,而似乎spm只能新建_build文件夹,对于下级文件夹不会再新建,所以会报错

使用build-config.js

如果不希望在敲命令时候传那么多乱七八糟的参数,可以将这些参数写在build-config.js里面,如下

module.exports = {
    "base_path": "../",
    "app_url": "http://x.com",
    "app_path": "http://www.cnblogs.com/"
};

当你在某个目录下执行spm build命令时,spm会自动寻找当前目录下有没有build-config.js文件,如果有则将内容解析为参数
当然如果你不喜欢这个名字,你还可以在执行spm命令时,用--config指定build配置文件

loader_config参数

如果你在某个js文件中,使用了seajs.config做了alias的配置,则打包时,需要传递--loader_config参数,将文件传给spm

seajs的spm使用的更多相关文章

  1. seajs中spm压缩工具使用

    seajs是个好东西,用起来很方便,但是她的压缩工具spm确不被网友看好,因为使用起来很麻烦,捯饬了一天多,终于勉强能压缩了,这里就简单记录一下. 按照地址:http://www.zhangxinxu ...

  2. seajs配合spm应用之四弹出框

    前面描述了 seajs的弹出遮罩层, 还没讲到弹出框, 这里接着把那几个例子介绍完. 目前已经有的工作是, 点击toggle按钮,可以弹出一个背投一样的暗灰色遮罩层, 主要的作用就是遮住当前页面上所有 ...

  3. seajs 和spm的使用简介

    说实话, 前端开发是一个令人头痛的事情. nodejs出现了很久了, 一直不是很习惯用nodejs, 当初刚出来的时候, 就下载了express, 想搭建个网站, 结果不是我的菜, 愣是用的不习惯,也 ...

  4. 转:seajs的spm使用摸索

    ~~~spm是基于nodejs的,打开nodejs命令行工具,npm install spm -g 进行spm的安装,过程很漫长 github上的官网不能访问 seajs自带的spm打包工具相关文档略 ...

  5. 我的前端之旅--SeaJs基础和spm编译工具运用[图文]

    标签:seajs   nodejs   npm   spm   js 1. 概述 本文章来源于本人在项目的实际应用中写下的记录.因初期在安装和使用Seajs和SPM的时候,有点不知所措的经历.为此,我 ...

  6. spm使用之二兼谈spm的贱格

    上一篇还没写完, 因为我觉得太长了, 影响阅读, 就截断继续写. 因为还没有写到修改 创建模块的模板啊. 之所以想到要修改spm用来创建模块的模板, 是因为, 有一天我突然上不了网了, 发现spm完全 ...

  7. RequireJS 和 SeaJS

    RequireJS SeaJS CMD规范 CommonJS的规范: 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的 ...

  8. 【整理】 JavaScript模块化规范AMD 和 CMD 的区别有哪些?

    根据玉伯等人在知乎上的回答整理.整理中... AMD 规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMD CMD 规范在这里:https://githu ...

  9. 构建seajs业务模块之grunt VS spm build

    在最开始,我并不知道grunt可以构建CMD模块.(以下spm指代spm build) 当时正困惑于如何用spm方便的构建业务模块,后来看到@twinstony (感谢@twinstony的分享)使用 ...

随机推荐

  1. Memcached笔记——(四)应对高并发攻击【转】

    http://snowolf.iteye.com/blog/1677495 近半个月过得很痛苦,主要是产品上线后,引来无数机器用户恶意攻击,不停的刷新产品各个服务入口,制造垃圾数据,消耗资源.他们的最 ...

  2. AndroidManifest.xml解释说明和android的启动过程

    1.android清单文件:AndroidManifest.xml 说明如下: <?xml version="1.0" encoding="utf-8"? ...

  3. 使用lua给wireshark编写uTP的Dissector

      lonelycastle做uTP的实验,使用wireshark捕包,但是最初没有找到wireshark下的uTP的dissector,每次都需要比对文档,这样做实验理解报文含义,效率非常低.作为程 ...

  4. codeforces 148D Bag of mice(概率dp)

    题意:给你w个白色小鼠和b个黑色小鼠,把他们放到袋子里,princess先取,dragon后取,princess取的时候从剩下的当当中任意取一个,dragon取得时候也是从剩下的时候任取一个,但是取完 ...

  5. HDU 4196 Remoteland

    题意:给定一个n,然后让你从1-n中选出某些数乘起来,使得乘积最大,并且乘积必须是完全平方数. 思路:将1-n种每个数都分解素因子,把他们的素因子的幂加起来,如果是偶数,就说明可以构成完全平方数,乘起 ...

  6. 各种SQL类型

    一.SQL:通常我们说的sql指的是最古老运用最方法的结构化查询语言(Structured Query Language),大部分人接触最多的是数据库查询使用,关系型数据库基本都支持. 二.T-SQL ...

  7. 最近有机会接触到了angularJs

    记点笔记  概念多了 理顺还待时日: 总的来说: 1.ng-src src属性 2.ng-href href属性 3.ng-checked 选中状态 4.ng-selected 被选择状态 5.ng- ...

  8. Swift基础知识入门(基于Swift2.0)

    //: Playground - noun: a place where people can play import UIKit // Swift中不需要设置main函数入口,编译器会在全局函数中自 ...

  9. MVC初学1

    MVC - Model ,View, Control 主要的程序思想:约定优于配置 百度下载程序:百度一下 密码:654321 百度视频地址:百度一下

  10. 利用SpringMVC参数绑定实现动态插入数据

    javabean代码:public class User { private String firstName; private String lastName; public String getF ...