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（info 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

Rails 5.1上的现代Webpack模板

1 个答案: