Browserify-Rails 使用指南

Browserify-Rails 使用指南

项目介绍

Browserify-Rails 是一个将 CommonJS 模块支持引入到 Rails 应用中的库，通过集成 Browserify，它允许您在 Rails 的资产管道中混用传统 //= require 方式和 require() 调用来导入普通 JavaScript 文件以及模块化代码。一旦进入 Browserify 处理的代码区域，您就需要切换到 require() 方法来引用模块，而不能再使用 Sprockets 风格的 //= require。此项目特别适合那些拥有大量遗留 JavaScript 代码的 Rails 项目，希望逐步迁移到现代模块化编码风格。

项目快速启动

步骤一：添加至 Gemfile

首先，在您的 Rails 应用的 Gemfile 中加入以下行：

gem 'browserify-rails'

然后运行 bundle install 来安装 gem。

步骤二：设置 npm 包

创建 package.json 文件于 Rails 根目录，并填入必要的依赖：

{
  "name": "your-app-name",
  "dependencies": {
    "browserify": "^14.0.0",
    "browserify-incremental": "^3.1.0"
  },
  "license": "MIT",
  "engines": {
    "node": ">=0.10"
  }
}

执行 npm install 安装所需 npm 包。

步骤三：编写 CommonJS 代码

现在您可以开始在您的 JavaScript 文件中使用 CommonJS 模块了。例如，创建一个 foo.js 和一个 application.js 如下：

foo.js

module.exports = function(n) {
  return n * 11;
};

application.js

var foo = require('./foo');
console.log(foo(12));

保存文件后，Rails 的资产编译系统将会自动处理这些模块化代码。

应用案例和最佳实践

对于带有遗留 JavaScript 的大型 Rails 项目，Browserify-Rails 提供了一个渐进式的迁移路径。建议在新项目中先集中重构关键组件为 CommonJS 模块，同时确保主入口文件清晰地分隔出旧式与模块化代码的边界。对于新代码，直接采用模块化方式编写，并且考虑长期策略时，可能需要评估从 Asset Pipeline 迁移到更现代的构建工具如 Webpacker 的时机。

典型生态项目

虽然 Browserify-Rails 专注于解决特定问题，它通常与其他生态系统内的工具协作。例如，结合 CoffeeScript 支持，您需在 package.json 添加 coffeeify 并配置 browserify_rails 如下：

// 在 dependencies 内增加 coffeeify
"dependencies": {
  "coffeeify": "~0.6"
}

并更新配置以支持 .coffee 文件：

config.browserify_rails.commandline_options = "-t coffeeify --extension=\".js.coffee\""

这使得在 Rails 中利用 CoffeeScript 编写模块化代码成为可能。

通过这种方式，Browserify-Rails 成为了无缝整合 Node.js 生态系统的桥梁，为 Rails 开发者提供了更多的灵活性和现代化的开发选项。