Rails 在 Rails 中使用 Yarn 管理三方 assets

jiazhen · 2016年11月18日 · 最后由 hiveer 回复于 2020年02月12日 · 5535 次阅读

近期觉得 Rails asset 不是那么顺畅,又刚好弄了一下 Yarn,故整合了一下。以下是我的 原文 :)


As the rise of Javascript, it's undeniable that we would need to use Javascript libraries to get better user experiences on the web application. In Rails, however, adding a Javascript library is not as smoonth as adding a gem.

You could download the javascript library and manually put it in vendor. However, the responsiblities of configurations and correcting font paths are on you. Or maybe rely on a relavant gem if luckily find it. But what if the gem is no longer maintained?

Look at Javascript ecosystem, npm, bower and the most recent - yarn, they are meant to manage Javascript libraries, so why don't we use one of them?

Install Yarn

I decided to use Yarn in which is a fascinating package manament tool as introduced in my previous post. So firstly we need to install Yarn. With MacOS just install it with brew

brew update
brew install yarn

And add export PATH="$PATH:$HOME/.yarn/bin" to your profile (this may be in your .profile, .bashrc, .zshrc, etc.)

Test that Yarn is installed by running:

yarn --version
# 0.16.1

Initialise a Rails project

First of all, initialise a new Rails project, run:

rails new yarn-with-rails
cd yarn-with-rails

And create a test page

rails g controller static_pages show
rails s

You should be able to see the test page on http://localhost:3000/static_pages/show as below


Next to initialise yarn

yarn init

OK, it's time to do the actual experiment.

Rails with Yarn

I will use FontAwesome for this experiment. Run:

yarn add font-awesome --modules-folder ./vendor/assets/components/

The latest font-awesome library is now installed in the Rails project! Add the following to config/initializers/assets.rb:

Rails.application.config.assets.paths << Rails.root.join("vendor", "assets", "components")

Rename app/assets/stylesheets/application.css to app/assets/stylesheets/application.scss and change the contents to the following:

 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *= require font-awesome/scss/font-awesome

Now can use awesome icons on our test page! In app/views/static_pages/show.html.erb, add

  I <i class="fa fa-heart" aria-hidden="true"></i> Ruby

Restart the server and visit http://localhost:3000/static_pages/show, font-awesome is on the page! \o/

static page with font awesome

Font path dependency

On development it's now perfect. However, if we deploy to production (on Heroku in my case), the icon is not showing and has issue with incorrect font path. We need to overwrite $fa-font-path to point to the correct path.

Create app/assets/stylesheets/font-path-overwrite.scss and add:

$fa-font-path: "font-awesome/fonts/";

Then change app/assets/stylesheets/application.css:

 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *= require font_path_overwrite
 *= require font-awesome/scss/font-awesome

That's it!


So now with Yarn, we can easily retrieve the appropriate Javascript libraries and manage them. The feeling is as using the right tool for the job, saving time with the most elegant way. I love Ruby, Rails is my most favourite web framework, hope this can make it better. If you have any question, feel free to comment or drop me a line.

在用 bower,yarn init 换成 bower init,用法一模一样

huacnlee 将本帖设为了精华贴。 11月18日 10:13

标题是不是应该叫: 在 Rails 中使用 Yarn 管理三方 assets?

我在用 gem 'bower-rails', '~> 0.11.0'

npm 用的蛮好的

还是离不开 pipline 啊和用 npm/bower 一样. 还以为可以完全脱离 Rails 的模式呢.  有没有同学感觉使用 webpack 这种基于模块加载的方式比 Rails 现在的前端资源管理方式更好.

#1 楼 @adamshen Bower 也挺好的,我个人挺喜欢 Yarn 的离线和并行下载的功能

#6 楼 @lilijreey 哈哈,我刚刚开始的时候主题是 Rails asset pipeline is dated. webpack 确实是一个好的替代品,但是我不想用它因为

  • 配置繁琐
  • 与 Rails 框架不太兼容。如 Heroku 和 AWS Elastic Beanstalk,自动部署时都运行 assets:precompile

#6 楼 @lilijreey 我司用 webpack 打包前端资源 (https://ruby-china.org/topics/29630) 之后现在在做前后端分离,Rails 只提供 API,一定程度上提高前端的工作效率。

补充一点: Rails > 5.1, 在部署的时候 rake assets:precompile 会去 run yarn install。 不需要额外的配置。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号