如何将Rails 4.1.5应用的Git Submodule转为NPM依赖并接入Asset Pipeline？

针对你的Rails 4.1.5项目，我推荐使用sprockets-npm这个Gem来适配Asset Pipeline与NPM包的整合，下面是一步步的实现流程：

1. 清理现有Git Submodule #

首先移除项目中的Git Submodule，执行以下命令：

# 取消子模块关联
git submodule deinit -f path/to/your/submodule
# 从Git中删除子模块文件
git rm path/to/your/submodule
# 手动清理.gitmodules文件中的对应条目（如果自动未删除的话）

2. 初始化NPM环境 #

如果项目还没有package.json，先快速初始化：

npm init -y

3. 安装目标NPM包 #

把原来Submodule对应的代码换成NPM包安装：

• 如果是公开NPM包：

  npm install --save <package-name>
  

• 如果是私有Git仓库的自定义包（替代原来的Submodule）：

  npm install --save git+ssh://git@your-repo-domain.com/your/repo.git#your-branch-or-tag
  

4. 配置sprockets-npm Gem #

这个Gem能让Sprockets（Asset Pipeline的核心）识别node_modules目录下的资源：

1. 在Gemfile中添加：

   gem 'sprockets-npm'
   

2. 执行bundle安装：

   bundle install
   

3. 在config/application.rb中手动添加node_modules到Asset路径（老版本Rails手动配置更稳妥，避免自动识别失效）：

   config.assets.paths << Rails.root.join('node_modules')
   

5. 更新Asset Manifest文件 #

修改你的application.js或application.css，把原来指向Submodule的引用改成NPM包内的路径。比如：

• 原来的JS引用：//= require submodule-name/main
• 改成：//= require package-name/dist/main（具体路径要看NPM包的文件结构，通常编译后的文件在dist目录）

如果是CSS文件，在application.css中可以这样引用：

/*
 *= require package-name/dist/style
 */

6. 测试与预编译 #

最后验证是否能正常工作：

# 测试资产预编译
rake assets:precompile
# 启动服务器检查功能
rails s

注意事项 #

• 如果你的NPM包包含ES6+语法，Rails 4.1的Sprockets默认不支持，这时候可以添加babel-rails Gem（注意选适配Rails 4的版本，比如gem 'babel-rails', '~> 6.8'），然后在application.js开头添加//= require babel-core来转译。
• 有些NPM包可能没有预编译文件，需要自己处理编译逻辑，这时候可以结合npm scripts先编译再让Sprockets读取。

内容的提问来源于stack exchange，提问作者no_lyf_programmer