JavaScript [調查] 包管理方案

lepture · 发布于 2014年3月01日 · 最后由 tsing 回复于 2014年4月18日 · 4645 次阅读
96
本帖已被设为精华帖!

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

  1. 使用 Gem
  2. 使用 Bower
  3. 使用 Component
  4. 其它

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

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

https://github.com/component/spec

共收到 30 条回复
6291

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

96

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

96

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

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

7772

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

243

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

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

243

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

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

96

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

96

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

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

243

#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 对待依赖的解决方案. 现在工作的很好.

96

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

96

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

243

#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 下面, 是一个解压过的文件夹.

243

#12楼 @ruohanc

CMD 是一个规范, SeaJS 是一个 CMD 规范的实现.

AMD 也是一个规范, RequireJS 是一个 AMD 规范的实现.

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

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

96

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

7772

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

1

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

3

对我来说,没有包管理最好,就图个清静,拿常见的 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>
2847

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

96

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

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

202

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

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

586

@lepture 我用的是已被你废弃的 spm 嘎嘎

96

用 bower ,有很多第三方小代码端在gist 上,还有很多以zip的形式放在自己的小网站上,这些代码大部分都很久没人维护了,破不能

7119

seajs

96

哥,你这是属于从Flask跳槽到了Rails么?

96

#24楼 @layerssss 居然没人用npm...

96

Vote for NPM

30楼 已删除
96

rails 端只负责吐 restful API 前端用纯js方案 使用 gulp + bower 进行包管理和编译

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册