Sprockets::Commoner：Rails应用的JavaScript打包与Babel转换利器

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+。

快速起步

1. 在Gemfile中添加sprockets-commoner，运行bundle install，重启Rails服务器。
2. 创建package.json，添加babel-core v6 和 需要的包，例如Lodash：npm install -S babel-core@6 lodash。
3. 在application.js中通过require引入你的客户端JavaScript包！

var _ = require('lodash');

console.log(_.map([1, 2, 3], function(n) { return n * 3; }));

启用Babel转换

1. 安装所需的Babel插件或预设，例如ES2015预设：npm install babel-preset-es2015。
2. 添加.babelrc配置文件：echo '{"presets": ["es2015"]}' > .babelrc。
3. 开始使用新特性！在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之前，它可以作为一个可靠的过渡工具。