Sprockets::Commoner:Rails应用的JavaScript打包与Babel转换利器
更新提示: 此项目目前不再维护,建议在新项目中使用Webpacker。
Sprockets::Commoner 是一个针对Rails应用设计的宝石(gem),用于在Sprockets环境下进行JavaScript模块打包和Babel转换。它是Browserify或Webpack的替代方案,完美地融入了Rails的工作流程。
功能特性
- 整合JavaScript模块:将你的JavaScript模块编译成单一文件。
- Babel支持:运行Babel转换,确保代码符合现代浏览器标准。
- 简单易用:遵循Rails的设计哲学,无需复杂的配置即可启动。
- 深度集成Sprockets:充分利用Sprockets的功能,如ERB模板,无需额外工作。
- 优化压缩:生成的代码经过精心设计,压缩效果极佳。
- 环境变量:在JavaScript中使用
process.env
,同时也适用于node_modules
中的依赖。 - 自动去除重复的Babel助手:无需使用
babel-runtime
,Commoner会自动检测并共享已使用的助手,减少文件大小。
安装与设置
系统要求
- Ruby v2+。
- Rails 4+ 或其他使用Sprockets 3+的应用。
- npm v3+(建议v4+)。
- Node.js v4+。
快速起步
- 在Gemfile中添加
sprockets-commoner
,运行bundle install
,重启Rails服务器。 - 创建
package.json
,添加babel-core
v6 和 需要的包,例如Lodash:npm install -S babel-core@6 lodash
。 - 在
application.js
中通过require
引入你的客户端JavaScript包!
var _ = require('lodash');
console.log(_.map([1, 2, 3], function(n) { return n * 3; }));
启用Babel转换
- 安装所需的Babel插件或预设,例如ES2015预设:
npm install babel-preset-es2015
。 - 添加
.babelrc
配置文件:echo '{"presets": ["es2015"]}' > .babelrc
。 - 开始使用新特性!在
application.js
中试试import
和箭头函数:
import { map } from 'lodash';
console.log(map([1, 2, 3], (n) => n * 3));
进阶配置
可选择性地控制处理哪些文件,例如指定路径、排除列表等,请参阅官方文档获取更多详细信息。
使用Teaspoon测试
Teaspoon默认不兼容Commoner,但提供了一个示例Rails应用程序,展示了如何实现兼容。只需要添加teaspoon-bundle
到Gemfile,设置suite.boot_partial = 'bundle_boot'
在teaspoon_env.rb
中,就可以继续测试了。
CoffeeScript交互性
Commoner为从CoffeeScript迁移到ES2015提供了便利。
- JavaScript文件可以导入CoffeeScript文件,后者会被扫描以寻找全局变量引用。
- 使用自定义指令
expose
将ES2015模块暴露给全局命名空间。
方法论
Commoner注册了一个后处理器,它对所有application/javascript
文件进行Babel转换。
require
支持:通过替换require
调用来实现实体引用。- 打包:结合所有经过转换的JavaScript模块,以生成一个初始化函数,并共享Babel助手。
为何选择Sprockets::Commoner?
- 集成度高:无缝对接Rails,享受其强大的功能,如ERB模板。
- 代码压缩:生成的代码经过优化,压缩率高,减少加载时间。
- 过渡方便:对于已经使用CoffeeScript的项目,Commoner支持从CoffeeScript平滑过渡到ES2015。
如果你正在寻找一个简化JavaScript打包过程且能与Rails无缝协作的解决方案,Sprockets::Commoner无疑是值得尝试的选择。尽管该项目不再维护,但在升级至Webpacker之前,它可以作为一个可靠的过渡工具。