0x00 前言
Rails 6.0 发布已经有一段时间了,之前没有什么项目可以练手,最近总算遇到可以使用Rails 6开发的场景了。Rails 6中新增了一些功能和特性,有一些内容官方文档里并没有写的很具体,所以在摸索的过程中也遇到了一些坑点。这里以一个新工程从头到尾的构建,来简单记录在Rails6中使用jQuery和Bootstrap的过程。希望能够给新来的同学做个参考。
编程和码字的水平有限,如有错漏敬请指教,也请多包涵!下面就开始吧。
0x01 环境准备
- 操作系统: Debian 10 ( 4.19.0-8-amd64 )
- Ruby版本: ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-linux]
- Rails版本: Rails 6.0.2.1
1 | test@debian:~$uname -a |
0x02 创建项目
这里新建一个项目“TestApp”,并在其中建立控制器“Test”和测试方法“test”:
1 | test@debian:~$rails new TestApp |
创建好之后,修改test页面,添加一个表单和按钮,用于稍后测试Bootstrap。(在执行创建控制器和方法的命令后,Rails已经为我们自动添加了到Test控制器test方法的路由,所以不需要我们再新增路由。)
app/views/test/test.html.erb 代码:
1 | <h1>Test#test</h1> |
启动Rails服务,访问http://localhost:3000/test/test:
1 | test@debian:~/TestApp$rails s |

此时应用已经创建成功。
0x03 添加jQuery和Bootstrap库
这里采用yarn作为Javascript包管理器。在TestApp目录中运行bin/yarn
,如果出现以下内容,说明yarn没有安装:
1 | test@debian:~/TestApp$bin/yarn |
安装方法在这里, 以当前使用的Debian 10为例,安装的方法是:
1 | curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - |
安装好yarn之后,就可以用yarn添加jQuery包和Bootstrap包:
1 | test@debian:~/TestApp$yarn add jquery |
由于Bootstrap还需要基于popper.js,不装的话会报依赖错误,所以安装一下:
1 | test@debian:~/TestApp$yarn add popper.js |
安装的执行结果:

因为众所周知的原因,网速慢的同学就尴尬了,这里可能要等很久,所以你需要选一个科学一点的方式。
此时查看TestApp/node_modules目录,所需的前端库已经添加好了:
1 | test@debian:~/TestApp$ls node_modules/jquery/ |
0x04 使用Bootstrap
跟Rails5有所不同的是,Rails6采用webpack打包的方式,把需要打包的资源统一放在一个文件里(Rails6之前是采用Gemfile的方式引入第三方库,再通过Asset Pipeline汇聚)。
于是在安装好所需的前端库之后,就需要在app/javascript/packs/application.js中先引用它:
以Bootstrap为例,在其中添加import 'bootstrap'
引入语句:

与此同时还需要在application.scss中引入Bootstrap的CSS样式表:
在app/assets/stylesheets/application.scss文件中添加@import "bootstrap/dist/css/bootstrap";
:

2020/05/28 Patch
纠个错,如果想要通过@import "bootstrap/dist/css/bootstrap";
的方式引用bootstrap相关的CSS,需要把app/assets/stylesheets/application.css文件重命名为app/assets/stylesheets/application.scss。
如果直接使用app/assets/stylesheets/application.css的话,那么采用如下方式来引用:
1 | /* |
Ending Patch
接着继续修改app/views/test/test.html.erb文件中的代码,添加相应的CSS类来测试Bootstrap是否已经引入成功:
1 | <h1>Test#test</h1> |
启动应用,再次访问测试页面:

虽然界面有点丑,但是从渲染效果来看,Bootstrap已经成功引入了。
0x05 使用jQuery
继续修改app/javascript/packs/application.js,添加用于测试jQuery的代码:
1 | // This file is automatically compiled by Webpack, along with any other files |
保存并运行,刷新https://localhost:3000/test/test页面,发现添加的代码无法执行,控制台中有报错:
1 | ReferenceError: $ is not defined |

这是因为jQuery库也需要引入一下,但是引入的方式有些不同,并不是在页面中直接引入,而是需要在config/webpack/environment.js中添加以下引入代码:
1 | var webpack = require('webpack'); |

通过声明一个全局的导出,就可以在全局的JS代码文件中使用”$”符号了。
刷新并再次访问,代码能够运行,控制台也没有再报错,说明jQuery已经成功集成:

另一种方法
还有一种方法是通过在JS文件按中使用import $ from 'jquery'
来使”$”符生效,但是这样比较繁琐,需要在每个JS文件中出现,所以不再介绍了,当然,也提供一下详细的代码参考
1 | // This file is automatically compiled by Webpack, along with any other files |
0x06 总结
在网上主要参考了这篇文章。Rails 6中的变化还是挺大的,不知道webpack会不会真的成为Rails的未来,感觉之前使用coffee script来写JS的同学不是很多,但是我倒是已经非常习惯于使用它来开发前端功能了。
但是想必Rails的先驱们有着他们更成熟的考虑吧,那就一起继续探索好了。