JavaScript [調查] 包管理方案

lepture · 2014年03月01日 · 最后由 tsing 回复于 2014年04月18日 · 6812 次阅读

本帖已被管理员设置为精华贴

ruby 社區的人喜歡把 JavaScript 包成一個 Gem，不知道現在的情況是怎麼樣的。

使用 Gem
使用 Bower
使用 Component
其它

我個人是推崇 component 的，component 不僅僅是一個包管理工具，還是一套寫 JavaScript 的規範。使用 component 時，我會覺得確實在寫嚴肅的庫。而 jquery plugin 的方案，總給人玩具感。

這一帖算調查，也算推薦 component 吧。

https://github.com/component/spec

9 个赞

lepture #1 2014年03月01日

另外補充幾篇文章：

swordray #2 2014年03月01日

Rails Assets https://rails-assets.org/ 居家旅游必备

2 个赞

xieren58 #3 2014年03月02日

component 很不错，不过几乎所有的 component 包在 ie9 以下都不行~

Saito #4 2014年03月02日

大概一年前了解到 Component, 但是最终没有在我们的前端项目里面使用，基于以下几点：

build 的过程的可控性不高，custom 的成本略高。( copy, concat, build templates
没有完善的 watch 机制，TJ 的 watch 实用性太低。
一次 build 的速度没法保障，在 rebuild 过程中没有 cache.
所有的包都必须被 Wrap, 这其实并不实用.. ( 想想那些之前不支持 CMD 以及 AMD 的，还有大量的 jquery 插件。
Component 不鼓励使用 Coffee, SCSS 之类的产品做 component, 也没有对应的支持。而我们的项目全部使用 Coffee 与 SCSS 编写。

基于我们项目的需求，自己开发了 Linner, 这个项目的灵感其实是从 brunch 来的。基于我们使用的是 SCSS, 以及速度和定制性方面的考虑，选择了自己开发。

从现在的使用效果上来说，团队成员还是比较满意的，即使有很一些新的需求，也能很快的加上。

模块可以有选择性的被包装为 CMD, 这样我就不用在每一个模块里面都声明一下 require "jquery", 只需要指定需要被包装的路径就可以了。在被包装过的模块里，大家的命名空间不会相互污染。

我们现在的项目代码量属于比较多的，其中的模块数量非常多。所以第一次 watch 的时间往往需要 5 秒左右，但是一旦 watch 完毕，接下来的修改只需要在 300ms 左右就能响应完毕并且完成 LiveReload. 这种响应是别的产品做不到的。

最近也新加了一个 bundle(包管理) 机制，直接从远端拉取源码，不用考虑什么注册机制，是不是 CMD, AMD 包装，简单实用。

我们的自己的项目也是在用 bundle 机制组织。

11 个赞

ruohanc #5 2014年03月02日

#4 楼 @Saito 咦..你们现在不是说用 java 写么.?

btw: 你 linner 推销的好勤快啊 lol

coderek #6 2014年03月02日

@Saito 如果用 requirejs, 把每个模块化的代码分别编译，按需加载，不也是可以达到你们的要求？单纯讲 javascript 的话。

Saito #7 2014年03月02日

#5 楼 @ruohanc 用 Java 就代表不能有潮流的 JavaScript 夹沟方案啦？

碰到这种主题就完全把持不住啊，因为这些东西我都玩儿过... 最近前端比较好的解决方案其实是 gulp.

Saito #8 2014年03月02日

#6 楼 @coderek 按需加载的实用性其实很低，顶多按需 build. 实际上大家再用 requirejs 这类产品的时候最终还是用 r.js 打包了一次。

另外，Linner 和 Component 一样，是将 JavaScript/CSS/HTML 结合起来称之为一个 component. 而不是单纯的 JavsScript. 更进一步，我们将后端的模板 ( 类似 ERB 也放入前端工程，这样的 component 是完整的。

ruohanc #9 2014年03月02日

#7 楼 @Saito 被你的诚意完全打动了！我也试试看..

krazy #10 2014年03月02日

正好这周看了下 linner，感觉代码比 sprockets 好读多了...类关系没有那么乱。

component 的 js/css/template 以及依赖关系在配置里面怎么体现的呢？没搞明白groups和bundles的区别。

Saito #11 2014年03月02日

#10 楼 @krazy bundle 现在还不能以 component 粒度来依赖。

我们现在的用法是：自己有一套类似 bootstrap 的框架。包含 JavaScript 与 CSS 还有一些前端模板，这些东西被 Linner watch 之后生成 *.js 与 *.css 两个文件。别的项目文件分别在 bundle 里面依赖这两个文件。而依赖这两个文件的项目内部便以 component 的形式继续编写模块。

bootstrap 是同理的，你可以在 bundle 里面依赖 bootstrap 压缩好的 bootstrap.js 与 bootstrap.css 文件，然后用 order 去排序，使他们在最前面就可以了。类似这样：

order:
  - vendor/jquery.js
  - vendor/bootstrap.js
  - ...
  - app.js

... 是 Linner 支持的排序 omit 元素，代表中间的。

下一步准备支持 zip/tar 文件的依赖，就可以解决 component 依赖问题了，实际上现在的前端项目里，依赖管理暂时还不是那么重要。因为人们很在意前端文件的大小，很深层次的依赖会让这个问题变复杂。所以这是 Linner 对待依赖的解决方案。现在工作的很好。

ruohanc #12 2014年03月02日

#4 楼 @Saito [OT] CMD 指的就是 SeaJS 么.?

krazy #13 2014年03月02日

@Saito 赞... 。所以这个 component 还是一个逻辑上的概念？比较想要的是指定 component 名和版本就可以得到最后 build 得到的 css 和 js 以及模版

Saito #14 2014年03月02日

#13 楼 @krazy 下个版本支持 zip/tar 就可以做到了。同样是用 bundle 这种方法，只不过最后拿到的是一个文件夹，而不是一个文件。

以前的依赖一个文件这么写：

bundles:
  jquery.js:
    version: 1.10.2
    url: http://code.jquery.com/jquery-1.10.2.js

依赖一个 zip 或者 tar 可以这么写：

bundles:
  awesome-component:
    version: 1.0
    url: http://code.awesome-component.com/downloads/1.0.zip

这样会默认 install 到 vendor 下面，是一个解压过的文件夹。

Saito #15 2014年03月02日

#12 楼 @ruohanc

CMD 是一个规范，SeaJS 是一个 CMD 规范的实现。

AMD 也是一个规范，RequireJS 是一个 AMD 规范的实现。

这是两个概念，其实 Linner 里面也有一个 CMD 规范的实现。不过对用户是透明的。

SeaJS 把这个声明暴露给了用户，加上巨复杂的配置。Sigh...

lepture #16 2014年03月02日

好好的一个调查，结果都没人回复自己在用什么。

coderek #17 2014年03月02日

#16 楼 @lepture 楼主这种纯粹的调查没太大意义，就像问 javascript framework 用什么。而且起到了一个让人跟风的作用，许多人用了不是因为很符合自己的项目，而是大多数人用。这样还不如介绍一下各个方案，写写科普文来的实惠。

Rei #18 2014年03月02日

#16 楼 @lepture 我已经放弃治疗了，官方有 gem 包的就用 gem，没有就手工下载放 vendor。

2 个赞

lgn21st #19 2014年03月02日

对我来说，没有包管理最好，就图个清静，拿常见的 Twitter Bootstrap 来说：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

1 个赞

yujing_z #20 2014年03月03日

公司用的都是 Rails，一般 gem 就能满足，偶尔会用 Bower 配合前端是 ember 的项目

lepture #21 2014年03月03日

#17 楼 @coderek 科普文太多了，沒有寫的價值，另我在一樓就已經給出了不少科普文了。

這個調查只是想了解一下 ruby 圈裏是怎麼用的。

xds2000 #22 2014年03月03日

我去年带的一个 Nodejs 项目 Cantas，完全用 javascript 技术栈实现，当时定下的目标是做一个Trello的开源版本。当时我们就遇到这个问题，一开始直接上，自己定义 scaffold 目录。在同时参考网上资料后，开始使用 RequireJS，同事都是 pythoner，接受不了，对我发出强烈反应。我们决定先用纯 JS，代码重写吧。scaffold 目录又经过讨论重新定义了一遍。自己管理 JS，加上 Grunt.js 可以快速上手。后来在开发中慢慢体会到包管理的概念。但至今没有找到合适自己口味的。期间有 Linner 第一版发布，我们已经到后期，就没有用过。

还有一个方面就是 coffeescript 的使用。这个对包管理的一致性也有要求。所以目前我还没找特别合适的工具。