seajs的spm使用

压缩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

时间: 2024-11-03 22:03:43

seajs的spm使用的相关文章

邂逅seajs 和spm

一些前端工具和平台介绍 Kissy: 由淘宝前端工程师们发起创建的一个开源 JS 类库.GitHub上可以下载: Alice:  是支付宝的前端css解决方案, 是arale的子集: seajs( 现在由淘宝和腾讯的人在维护这个项目.seajs简单来说, 就是类似与labjs, requirejs, labjs是可以动态载入js文件, 然后延迟将js功能加载到内存的工具): 简单的说 Node.js 就是运行在服务端的 JavaScript.node.js 是一个基于Chrome JavaScr

seajs中spm压缩工具使用

seajs是个好东西,用起来很方便,但是她的压缩工具spm确不被网友看好,因为使用起来很麻烦,捯饬了一天多,终于勉强能压缩了,这里就简单记录一下. 按照地址:http://www.zhangxinxu.com/wordpress/2012/07/seajs-node-nodejs-spm-npm 的步骤一步一步的来(感谢作者),先把前期工作准备好,直到安装成功spm. 接下来是使用SPM,首先需要在项目中新增一个package.json这是必须的,项目结构如下: 文件内容: { "family&

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

1. 概述 本文章来源于本人在项目的实际应用中写下的记录.因初期在安装和使用Seajs和SPM的时候,有点不知所措的经历.为此,我们编写本文档,通过图文并茂的方式来为大家讲解seajs和spm编译环境的搭建和基本使用方法. 2. 认识SEAJS seajs是一种前端模块化加载框架,与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载.SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程

高富帅seajs使用示例及spm合并压缩工具露脸

一.扯淡高富帅 很久很久以前……………………的很久很久的以后,也就是昨天的昨天(2012-07-07),D2前端技术论坛,下午3点,分会场,@老赵分享其开源项目(什么来着?名字似乎很难记,让我找找~~)Jscex. 印象较深的是末了,其戏称seajs为高富帅. 为何有此感慨?同样是开源项目,seajs因为①原作者个人影响力②推广渠道或者说团队影响力③背后干爹的大力支持等原因,其知名度以及接受程度要比Jscex高不少. 我自己似乎也有类似的感触,10年年初的时候,我自己折腾了一个关于CSS3的小项

seajs打包部署工具spm的使用总结

相信使用seajs的好处大家都是知道的,接触seajs好像是在半年前,当时还不知道页面阻塞问题,这里不带多余的话了. seajs实现了模块化的开发,一个网站如果分了很多很多模块的话,等开发完成了,发现有很大一堆的js需要加载,即使使用了seajs优化加载了,但是过多的http请求会造成服务器的压力,影响加载等等.这时候我们需要将模块进行压缩和合并.这时候spm工具派上用场了. 1.安装spm spm工具是基于node(nodejs的服务平台)的,因此我们需要先安装 node 和 npm 下载地址

seajs模块压缩问题

在优化整理项目代码时,想使用seajs来把代码模块化.看了下官方5分钟上手教程,觉得很不错,也没多想就一直开发下去了,也没出什么问题.等一同事说把代码打包个放到设备上去测试一下,发现怎么也跑不起来,郁闷了. 于是单步调试一把,发现模块一直加不进来.看了一下seajs的原码,明白了是怎么回事. define模块解析依赖有两种途径,一种是从define(id, deps, factory)中的deps来:还有一种是解析define代码,从require中来.来看一下代码: 1 Module.defi

SeaJS入门教程系列之使用SeaJS(二)

SeaJS入门教程系列之使用SeaJS(二) 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-03我要评论 这篇文章主要介绍了SeaJS入门教程系列之使用SeaJS,着重介绍了SeaJS的使用方法.关键方法的使用等,需要的朋友可以参考下 下载及安装 要在项目中使用SeaJS,你所有需要做的准备工作就是下载sea.js然后放到你项目的某个位置.SeaJS项目目前托管在GitHub上,主页为 https://github.com/seajs/seajs/ .可以到其git库的buil

用spm2构建seajs项目的过程

前言 Javascript模块化规范有CommonJs规范,和主要适用于浏览器环境的AMD规范,以及国内的CMD规范,它是SeaJs遵循的模块化规范.因为以前项目中用SeaJs做过前端的模块管理工具,所以这里总结一下自己的使用心得. 在试用SeaJs和官方推荐的CMD包管理工具——Spm2.x的过程中,遇到了很多高低版本不兼容和配置参数没弄明白的问题,后来在网上各处找资料才大概弄懂.这里我强调一下版本,是因为可能有的同学项目开始较早,用了以前版本的Seajs,再去看Seajs官网的API有些地方

利用SPM工具运行自己创建的小组件(使用common-model向后台接口请求数据)

步骤如下: 1.安装依赖:spm install -e 2.编译:spm build (编译好的东西会放在trunk-dist里面) 3.发布:spm app -d (会出来一个export端口,一般是:4745) 4.在浏览器中输入:http://localhost:4745/examples/index.html  即可运行 如果出错了,出bug了,修改完,重新操作2.3.4.三个步骤. for example: 1.组件架构如下: 2.代码:package.jon 配置信息(一些依赖):