Rails 5.1 上的现代 Webpack 模板

Question

我已经下载了this Adminator template，这是现代的 npm/yarn Webpack 主题。如模板主页所述，安装说明如下：

> git clone https://github.com/puikinsh/Adminator-admin-dashboard.git adminator
> cd adminator
> npm install
> npm run dev

而且它的作用就像一个魅力。

现在我的问题是，如何在 Rails 5.1+ 中实现它？创建新应用时，它应该像这样使用 webpack 支持：

> rails new myapp --webpack

那不是只支持 SPA 吗？我仍然希望 Rails 以旧方式呈现我的页面。

我应该把所有模板资产放在哪里，因为它们是由 npm install 在原始模板中作为 node_modules 安装的？

谢谢

Answer 1

您可以使用旧方式渲染 Rails 视图，只需使用 javascript_pack_tag（信息 here）将 Webpacker 组件插入您喜欢的任何位置：

# app/views/lists/index.html.erb
<div id='app'></div>
<%= javascript_pack_tag 'app' %>


# app/javascript/packs/app.js
import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.config.productionTip = false
Vue.use(VueResource)

Vue.component('to-do', {
   template: '<table class="table"><tr v-for="item in list" :key="item.id">...</tr></table>',
   data: function () {
     return {
       list: []
     }
   },
   mounted() {
     this.get()
   },
   methods: { 
     get: function () {
    this.$http.get('/list')
        .then(response => {
      this.list = response.body
    }, response => {
      console.log('no good')
    })
  }
}

new Vue({
  el: '#app',
  template: '<to-do></to-do>'
})

Sprockets 资产可以与 Webpacker 资产一起存在，但默认情况下 Webpacker 提供来自 app/javascript 的入口点，因此如果您希望 Webpacker 提供资产，您应该将它们放在那里。路径不需要调整，您可以从/vendor 或/assets 提供Sprockets 资产，Webpacker 默认将从app/javascript 提供服务。

顺便说一句，我认为 Rails 5.1 和 Webpacker gem 更喜欢 yarn 而不是 npm 但这可能没有太大区别。

您可以使用foreman 和Procfile 在同一个终端窗口中同时运行rails s 和webpack-dev-server。

# Procfile
rails: rails s
node: webpack-dev-server