Rails 用Webpack安装Bootstrap（附录webpack使用）

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了。

 

附录：rails/webpacker

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。