关于打包部署问题

[TerryLee]

Hi,各位，关于js打包的问题我一直有很大疑惑
像玉伯在seajs首页打包部署章节中(http://seajs.com/docs/zh-cn/deployment.html)叙述的spm工
具，感觉有些不方便之处如下：
1.需要安装NodeJS和NPM，然后再安装spm工具，实在是太麻烦了
2.需要linux/unix环境

示例中展示的毕竟比较片面，有些疑问还需要各位前辈解惑：
1.如果我有示例中几百上千个类似init.js这样的文件，这些文件依赖的js多多少少不同，那么是否需要手动打包N多次，有没有批量检查某目录下所
有js，将这些js和其依赖的js打包的操作
2.一旦某些页面js增加功能，修改依赖，每次还需要重新打包吗？
3.示例中好像打包还需要知道页面总共依赖了哪些js，而module中的dependencies只会显示当前模块的依赖，有可能会出现你依赖的文件
又依赖了其他很多文件的情况，能否暴露一个去重过后的所有依赖列表呢

最后想问问各位为什么现在普遍采用的都是静态打包，这样在修改后每次都要重新打包一次，用后台实现的动态打包不是会更方便么？

[玉伯]

Hi, TerryLee:

目前打包的确还不够完善。设想中和目前正在做的方案是：

一个应用 app 会有一个 build-config.js 文件，在 build-config 文件里，指明

打包策略，比如：

{

  "combo": ["init.js", "biz-a.js"]

}

等等，每次 build 的时，

手动的话，只要 spm build build-config.js 即可完成所有打包

自动的话，可以在部署上线阶段，让部署系统自动调用 spm build build-config.js 来

完成打包，开发者只需要编写源码和维护 build-config.js 文件即可

build-config.js 文件里，仅需指明要打包的入口文件文件即可，比如：

将 a.js 和其依赖的所有模块打包成一个，只需要在 build-config.js 里添加：

combo: ['a.js']

即可，无需知道 a.js 具体依赖哪些模块（依赖通过 spm 自动分析出来）

spm 依赖 nodejs，nodejs 目前已 release 0.5 beta 版本，支持 windows 系统，因此

这个方案是跨平台的

最推荐的还是采用上面的部署阶段的自动化打包方式，淘宝在开发静态资源管理系统，

等完善后，部分可通用的功能，会考虑开源出来给大家使用。

目前还在开发中，敬请期待。并欢迎各位提出宝贵的建议，特别是关于

希望如何使用的。

玉伯

2011/8/17 TerryLee <binli...@gmail.com>

--
王保平 / 玉伯（射雕）
送人玫瑰手有余香
http://lifesinger.org/

[李斌]

Hi,玉伯

  

感谢回复，关于您目前提出的方案需要配置文件来指明打包策略，其实dojo就是这样打包的，定义一个profile，把所有需要打包的文件写明，但是这样的策略并不是很方便，你得需要罗列所有需要打包的文件名，我建议你基于“约定大于配置”的原则，打个比方约定以_pkg.js结尾的文件就是需要打包的文件，打包时自动去扫描会更KISSY

此外，还是纠结与spm需要安装nodejs的问题，有些很小的公司可能部署的人会很多，这样每个人打包前都需要先安装打包环境，一些大的规范的公司，在机器上安装软件还可能要层层打申请，总之感觉不利于推广

spm是如何取得所有依赖js的，是否可以考虑把这部分逻辑放在seajs中，把所有依赖的js以module的一个全局变量暴露出来，这样我们可以自己来写后台的combo程序？

[玉伯]

感谢李斌提供的信息，我去看看 dojo 的方式

“约定”大于配置的方式很不错，但有一个问题是，这要求开发者一开始就要想要打包策略，这样才好定文件名，很担心这种“约定”会导致后续修改文件名，而使得调用处的 require 都需要修改，增加成本。

对于打包和压缩来说，我的想法是，开发者只需要提供 源码 和 build-config.js 即可，本地不需要装 spm，spm 统一装在部署机器上，比如将代码发布到测试环境或线上环境时，会自动调用 spm 来进行打包和压缩，对开发者是透明的。

目前模块的依赖关系，有的：

define(function(require, exports, module) {

  console.dir(module.dependencies);

});

可以得到当前模块的依赖信息。

玉伯

2011/8/18 李斌 <binli...@gmail.com>

[李斌]

我说的依赖关系不仅是指当前模块的依赖，还包括当前依赖的模块的依赖这样的依赖链中所有文件

另外SPM打包把N个js压缩后会对原来的代码做什么改动吗，比如会不会删除require，或者define等模块定义会有所改变，如果仅是把文件代码合并的话，我可以自己写一套适合我们项目的后台打包工具

[玉伯]

spm 里已经考虑了依赖链，呵呵。module.dependencies 没考虑，只有一级

spm 打包文件时，会提取依赖信息，并将相对 id 写入，比如：

define(function(require, exports) { ... })

spm 后会变成类似：

define('./path/to/id', ['./a', 'jquery'], function(r,e) { ... })

其他代码保持不变。

2011/8/18 李斌 <binli...@gmail.com>

[Andre]

hello 玉伯，看了demo及上面的讨论，我还有几个关于打包的疑惑：

（1）、demo中的两个打包版本(online 和 standalone)，通过spm build命令的参数(--combo 和 --combo all)是如何做到决定是否打包jquery.js文件的？是不是将来会由build-config.js来约定，目前只是一个设想？

（2）、在demo中init.js是一个页面或应用的唯一入口，从这个入口开始所有被依赖到的文件都打包到一起。但是如果一个页面有多个入口文件，例如control:header中有一个search.js的入口，control:menu中有一个menu.js的入口，screen中有一个app.js的入口，并且这三个入口文件的依赖各有重叠的部分。如果还用刚才的打包方法得到的三个js压缩文件就会出现同一个模块被多次打包的情况，这个问题怎么解决？

（3）、假设每个页面只有一个入口，打包后每个页面只有一个js文件（类似计算器online版本），但是多个页面之间的切换不会刷新页面而是异步加载新页面的html片段和js文件替换掉当前的内容，这样的话也会出现（2）中所说的同一个模块被分多次重复引入的问题，这个又怎么解决？

谢谢。

[玉伯]

Andre, 你问的问题都很实在，非常感谢。

等周末答复你。

玉伯

2011/8/26 Andre <andre...@gmail.com>

[Frank Xu]

Hi，Andre

仔细看了你三个需求

第一个目前是没有打包类似jquery这样的top-level文件的，后续考虑加入--with-top-module强制打包（虽然我们不赞成这么做，不利于跨应用重用）

第二个其实spm应该是无法完美解决的，打包工具并不知道目前哪些模块被复用，如果完全独立的两个页面有模块被复用，那么要么这个模块异步引入，要么就接受一点冗余。引入exclude的方式可以解决第二个第三个页面不打包第一个页面有的内容，那第二个页面用到重复模块的时候怎么办？

第三个没明白，有gtalk可以详细沟通下么？可以私信我，非常感谢。

-- 
文河（@yyfrankyy）

http://about.me/yyfrankyy

[李斌]

Hi，玉伯
     很关注你spm打包工具的进度，目前完成的怎么样了？
     另外想请教下打包中css部分的逻辑处理，你是如何处理不同目录下的css打包成同一个文件后url中目录层级问题的？

[玉伯]

李斌：

spm 项目目前 0.3 版快完成了，这周五之前会发布出来。

css 的问题现在尚未考虑相对路径的问题。淘宝的应用场景下，css 上线后，里面的图片路径全部

是绝对路径，因此不会有问题。

目前 spm 着重处理的是 js 文件。

玉伯

2011/10/8 李斌 <binli...@gmail.com>

[李斌]

不重新开贴了，还是打包合并中的问题，目前项目中所有require都是用的别名，在打包时用combine时不会将别名的文件打进去，用combine_all的话id又不对，引用不上，请问如何解决？

[Frank Wang]

假设别名配置是统一在某个文件里配置的，比如：

init.js:

seajs.config({

  map: { ... }

});

那么可以在 build-config.js 里，配置：

loader_config: 'path/to/init.js'

这样就可以让 spm 在打包时识别别名。

玉伯

2012/4/23 李斌 <binli...@gmail.com>

[TerryLee]

感谢回复，比较迷惑路径的问题，现在我指定了app_url，base_path和loader_config三个参数，但是打出来的
module_id是app_url+app_path这种形式的，而依赖的模块又是alias，而config里面alias对应的路径跟生成的路径
又不同，是相对路径的形式，这样就导致，匹配不上的问题，不知道我解释的是否清楚

On 4月23日, 下午9时41分, Frank Wang <lifesin...@gmail.com> wrote:
> 假设别名配置是统一在某个文件里配置的，比如：
>
> init.js:
>
> seajs.config({
> map: { ... }
>
> });
>
> 那么可以在 build-config.js 里，配置：
>
> loader_config: 'path/to/init.js'
>
> 这样就可以让 spm 在打包时识别别名。
>
> 玉伯
>

> 2012/4/23 李斌 <binlic2...@gmail.com>

>
>
>
>
>
>
>
>
>
>
>
> > 不重新开贴了，还是打包合并中的问题，目前项目中所有require都是用的别名，在打包时用combine时不会将别名的文件打进去，用combine_all的话id又不对，引用不上，请问如何解决？

> > 在 2011-10-16 晚上9:54，"玉伯" <y...@taobao.com>写道：
>
> > 李斌：
>
> >> spm 项目目前 0.3 版快完成了，这周五之前会发布出来。
>
> >> css 的问题现在尚未考虑相对路径的问题。淘宝的应用场景下，css 上线后，里面的图片路径全部
> >> 是绝对路径，因此不会有问题。
>
> >> 目前 spm 着重处理的是 js 文件。
>
> >> 玉伯
>

> >> 2011/10/8 李斌 <binlic2...@gmail.com>

>
> >>> Hi，玉伯
> >>> 很关注你spm打包工具的进度，目前完成的怎么样了？
> >>> 另外想请教下打包中css部分的逻辑处理，你是如何处理不同目录下的css打包成同一个文件后url中目录层级问题的？
>

> >>> 在 2011年8月31日 下午10:36，Frank Xu <yyfran...@gmail.com>写道：
>
> >>> Hi，Andre
>
> >>>> 仔细看了你三个需求
>
> >>>> 第一个目前是没有打包类似jquery这样的top-level文件的，后续考虑加入--with-top-module强制打包（虽然我们不赞成这么做，不利于跨应用重用）
>
> >>>> 第二个其实spm应该是无法完美解决的，打包工具并不知道目前哪些模块被复用，如果完全独立的两个页面有模块被复用，那么要么这个模块异步引入，要么就接受一点冗余。引入exclude的方式可以解决第二个第三个页面不打包第一个页面有的内容，那第二个页面用到重复模块的时候怎么办？
> >>>> 第三个没明白，有gtalk可以详细沟通下么？可以私信我，非常感谢。
>
> >>>> --
> >>>> 文河（@yyfrankyy）
> >>>>http://about.me/yyfrankyy
>
> >>>> On Friday, 26 August 2011 at 12:40 PM, 玉伯 wrote:
>
> >>>> Andre, 你问的问题都很实在，非常感谢。
> >>>> 等周末答复你。
>
> >>>> 玉伯
>

> >>>> 2011/8/26 Andre <andreleo...@gmail.com>

[Frank Wang]

清楚，打包这方面，我和同事这几天正在讨论，接下来会做大量调整，让打包简单易用

玉伯

2012/4/24 TerryLee <binli...@gmail.com>

[TerryLee]

Hi,请问打包机制调整进度如何？目前项目正准备上线，有没有基于目前的应急方案？再描述下目前的问题：
假设页面对应的js路径为http://example.com/scripts/common/a.js
依赖的公共js路径为：http://example.com/resources/util/util.js
seajs的目录为:http://example.com/resources/base/sea.js
配置文件config.js中alias为:  'util':'demo/../../util/util.js'     (demo为base目录的子目录，因为../开头会被认为基于页面，只能想这种办法来定位到base目录，config.js所有页面都会引入)
然后combine_all的配置文件为：
module.exports = {
    "base_path": "resources/base",
    "app_url": "http://example.com",
    "loader_config":"resources/base/config.js",
    "out_path":"_build_"
};
问题1：使用combine_all时app_path指定不指定没区别，why?理想中应该吧a.js的id指定为http://example.com/scripts/common/a.js而现在是http://example.com/a.js
问题2：打包后生成文件中a.js的依赖模块为"util"，而util的id为"../resources/util/util.js",无法匹配

[Frank Wang]

TerryLee:

很抱歉，看了你的描述，我依旧不明白问题在哪，对具体目录的存放也毫无头绪。

有一个应急解决方案是，你们这个项目的文件多不多？如果不多的话，手动将每个文件的 id 和依赖关系写上，比如：

/* util.js */

define(function(require, exports, module){

});

改成：

/* util.js */

define('util', ["xx", "bb"], function(require, exports, module) {

});

然后在 alias 里，增加 util, xx, bb 的配置，指向其绝对路径（可以让 host 可切换）

这样，所有文件就都可以用任何工具压缩和合并了。

希望这个方法能解决你的问题。

2012/5/11 TerryLee <binli...@gmail.com>

[赵启明]

你的base_path路径都没有包含a.js所在路径，我理解这个路径必须包含所有要打包的JS文件。

[binlic2010]

base_path不是sea.js所在的目录么？按照一般来说，项目中sea.js这些库文件会跟项目文件放不同文件夹才对，难道必须将项目的js放到base目录下？

另外回玉伯的：

项目中页面js的路径为：http://example.com/scripts/common/a.js    对应windows路径比如为D:/js/scripts/common/a.js

seajs及公共js路径为：http://example.com/resources/base/sea.js    对应windows路径比如为D:/js/resources/base/sea.js

页面中依赖的工具类及类库路径跟seajs相似，为:http://example.com/resources/util/util.js  , 对应windows路径比如为D:/js/resources/util/util.js

 

如果我在config.js中想alias映射的地址改为http这种形式的话用combine_all命令打包合并时会报错，解析util.js地址时会变成D:/js/http://example。。。。类似这种错误

---

binlic2010

 

发件人： 赵启明

发送时间： 2012-05-14 14:30

收件人： seajs

主题： Re: 关于打包部署问题

[tdwyx x]

你好，

想问一下1.0的进度怎么样了？ https://github.com/seajs/spm/issues/125 

有几个新特性很期待，可是github上一点动静都没有，所以跑这来问下。

谢谢 

 

在 2011年10月16日星期日UTC+8下午9时54分50秒，玉伯写道：

[Frank Wang]

才刚开始开发，很抱歉。deadline 是 6月20日

2012/6/3 tdwyx x <td...@126.com>

[fmxzhou]

目前也遇到你的第二个问题，请问有什么样的解决方案？

目前想到的方法：

1. 多页面共享模块时，将其定位于定级模块，这样打包时可以忽略。

 2. 接受冗余。

在 2011年8月26日星期五UTC+8上午10时47分22秒，Andre写道：