Rails6将默认使用webpack代替asset:
本文讲述如何自己配置。
参考:
https://getbootstrap.com/docs/4.1/getting-started/webpack/
https://github.com/rails/webpacker
https://gorails.com/episodes/how-to-use-bootstrap-with-webpack-and-rails?autoplay=1
步骤:
安装:
//后两个是依赖 yarn add bootstrap jquery popper.js
配置:
#config/webpack/environment.js const { environment } = require('@rails/webpacker') const webpack = require('webpack') environment.plugins.append("Provide", new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', Popper: ['popper.js', 'default'] })) module.exports = environment
备注:
new webpack.ProvidePlugin(),自动load模块无需每次都import或require.
https://webpack.js.org/plugins/provide-plugin
#app/javascript/packs/application.js添加 import 'bootstrap' import '../stylesheets/application' document.addEventListener('turbolinks:load', ()=>{ $('[data-toggle="tooltip"]').tooltip() $('[data-toggle="popover"]').popover() }) #新建app/javascript/stylesheets/application.scss。 @import "~bootstrap/scss/bootstrap";
完成配置!可以使用Bootrap4了。
附录:
rails5需要手动安装webpack。rails6默认使用webpack了!
结构:
app/javascript: ├── packs: │ # only webpack entry files here │ └── application.js └── src: │ └── application.scss └── images: └── logo.svg
在view上使用webpack:
<%= javascript_pack_tag 'application' %>
如果在pack文件中引进了styles:使用?来链接:
<%= stylesheet_pack_tag 'application' %>
如果链接静态资源<link><img>标签,使用:
<link rel="prefetch" href="<%= asset_pack_path 'application.css' %>" /> <img src="<%= asset_pack_path 'images/logo.svg' %>" />
development
2个binstubs。
# webpack dev server ./bin/webpack-dev-server # watcher ./bin/webpack --watch --colors --progress # standalone build ./bin/webpack
在开发模式下,Webpacker在命令中(on-demand)编译,不在前端upfront。这个过程发生在使用Webpacker helper methods时。因此无需运行任何独立的processes。编译错误会记录在标准的RAils log。
动态加载
如果想要动态加载(use live code reloading),或者因为JS代码过多导致on-demand compilation太慢,可以使用./bin/webpack-dev-server。这个进程会监视app/javascript/packs/*.js文件的变化并自动的在浏览器上重新加载。
当你开启development server, Webpacker会自动代理所有的webpack asset requests给服务器。
当你停动态加载后,会改回使用on-demand compilation。