JavaScript [調查] 包管理方案

lepture · March 01, 2014 · Last by tsing replied at April 18, 2014 · 6797 hits
Topic has been selected as the excellent topic by the admin.

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

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

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

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

https://github.com/component/spec

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#12 楼 @ruohanc

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Unknow user #26 March 13, 2014

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

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

Vote for NPM

30 Floor has deleted

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

You need to Sign in before reply, if you don't have an account, please Sign up first.