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。