{"id":14955591,"url":"https://github.com/multpix/rails-webpacker-vue","last_synced_at":"2025-10-01T18:31:47.199Z","repository":{"id":96750564,"uuid":"87887005","full_name":"multpix/rails-webpacker-vue","owner":"multpix","description":"Пример Rails приложения с Webpacker и Vue.js","archived":false,"fork":false,"pushed_at":"2017-04-13T10:31:52.000Z","size":99,"stargazers_count":19,"open_issues_count":0,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-14T11:21:31.317Z","etag":null,"topics":["es6","rails5","ruby","slim","stylus","vue","webpack"],"latest_commit_sha":null,"homepage":"https://rails-webpacker-vue.herokuapp.com/","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/multpix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-11T04:06:37.000Z","updated_at":"2022-04-18T15:00:53.000Z","dependencies_parsed_at":"2023-04-20T14:32:49.347Z","dependency_job_id":null,"html_url":"https://github.com/multpix/rails-webpacker-vue","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"29818331bc6f2bae4b04e162e5cbeb0816a0d010"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multpix%2Frails-webpacker-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multpix%2Frails-webpacker-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multpix%2Frails-webpacker-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multpix%2Frails-webpacker-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/multpix","download_url":"https://codeload.github.com/multpix/rails-webpacker-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234724696,"owners_count":18877248,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6","rails5","ruby","slim","stylus","vue","webpack"],"created_at":"2024-09-24T13:11:25.013Z","updated_at":"2025-10-01T18:31:41.840Z","avatar_url":"https://github.com/multpix.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"![rails/webpack](https://cdn-images-1.medium.com/max/1400/1*cy8AeRsOoHYG2GNxRYJ8VQ.png)\n\n# Пример Rails приложения с Webpacker и Vue.js #\n\n\u003eпо мотивам статьи:\n\u003e\n\nДля Rails 5.1, с ключем `--webpack`, ожидается первоклассная поддержка [Webpack](https://webpack.js.org/)\nа так же интеграция с **React**, **Angular** и **Vue** из коробки.\n\nВ этом примере -\nнемного о свежей версии [Webpacker](https://github.com/rails/webpacker)\nи его возможностях, простая инреграция `Vue.js`\n\n**Изначальные условия**\n\n- Bash\n- Git\n- JavaScript\n- Node\n- Yarn\n- Webpack\n- Ruby 2.4.1\n- Rails 5+\n\n## Установка ##\n\nНа вашей машине должны быть установленны `ruby`, `node` и `yarn`.\n\nНачнем с создания нового `Rails 5.1` приложения.\n\nОткройте терминал и выполните следующие команды в директории по вашему выбору:\n\n```bash\nmkdir rails-webpacker\ncd rails-webpacker\ncat \u003e Gemfile \u003c\u003cEND_CONF\nsource 'https://rubygems.org'\nruby '2.4.1'\ngem 'rails', github: 'rails/rails'\nEND_CONF\nbundle\n```\n\nТак, в текущей директории будет создан `Gemfile`, полученна свежая версия `Rails`.\n\nТут же выполним установку нового Rails приложения:\n\n```bash\nbundle exec rails new . --dev --force --webpack\n```\n\nИзящный ключ `--webpack`, после создания Rails 5.1 приложения,\nустановит `webpack` и `Yarn`.\n\nПроверте `Gemfile`, и при необходимости, уточните следующие строки:\n\n```ruby\nruby '2.4.1'\nsource 'https://rubygems.org'\n\ngit_source(:github) do |repo_name|\n  repo_name = \"#{repo_name}/#{repo_name}\" unless repo_name.include?(\"/\")\n  \"https://github.com/#{repo_name}.git\"\nend\n\ngem 'rails',       '~\u003e 5.1.0.rc1'\ngem 'pg',          github: 'ged/ruby-pg'\ngem 'puma',        github: 'puma/puma'\ngem 'foreman',     github: 'ddollar/foreman'\ngem 'webpacker',   github: 'rails/webpacker'\ngem 'jbuilder',    github: 'rails/jbuilder' \ngem 'slim-rails',  github: 'slim-template/slim-rails'\ngem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]\ngem 'uglifier'\n\ngroup :development do\n  gem 'listen', '\u003e= 3.0.5', '\u003c 3.2'\n  gem 'spring'\n  gem 'spring-watcher-listen', '~\u003e 2.0.0'\nend\n\ngroup :development, :test do\n  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]\n  gem 'sqlite3'\nend\n# gem 'rack-cors'\n# gem 'redis', '~\u003e 3.0'\n# gem 'bcrypt', '~\u003e 3.1.7'\n# gem 'capistrano-rails', group: :development\n```\n\nУстановка зависимостей: `bundle update`\n\nИнтегрировать Vue.js в существующее приложение, можно следующим образом:\n\n```bash\nrails webpacker:install:vue\n```\n\nДополнительные пакеты `js`:\n\n```javascript\n{\n  \"name\": \"app\",\n  \"private\": true,\n  \"dependencies\": {\n    \"autoprefixer\": \"^6.7.7\",\n    \"babel-core\": \"^6.24.1\",\n    \"babel-loader\": \"^6.4.1\",\n    \"babel-preset-env\": \"^1.3.3\",\n    \"coffee-loader\": \"^0.7.3\",\n    \"coffee-script\": \"^1.12.4\",\n    \"compression-webpack-plugin\": \"^0.4.0\",\n    \"css-loader\": \"^0.28.0\",\n    \"extract-text-webpack-plugin\": \"^2.1.0\",\n    \"file-loader\": \"^0.11.1\",\n    \"glob\": \"^7.1.1\",\n    \"js-yaml\": \"^3.8.3\",\n    \"node-sass\": \"^4.5.2\",\n    \"path-complete-extname\": \"^0.1.0\",\n    \"postcss-loader\": \"^1.3.3\",\n    \"postcss-smart-import\": \"^0.6.11\",\n    \"precss\": \"^1.4.0\",\n    \"pug\": \"^2.0.0-beta11\",\n    \"pug-loader\": \"^2.3.0\",\n    \"rails-erb-loader\": \"^5.0.0\",\n    \"sass-loader\": \"^6.0.3\",\n    \"style-loader\": \"^0.16.1\",\n    \"stylus\": \"^0.54.5\",\n    \"stylus-loader\": \"^3.0.1\",\n    \"vue\": \"^2.2.6\",\n    \"vue-loader\": \"^11.3.4\",\n    \"vue-template-compiler\": \"^2.2.6\",\n    \"webpack\": \"^2.3.3\",\n    \"webpack-manifest-plugin\": \"^1.1.0\",\n    \"webpack-merge\": \"^4.1.0\"\n  },\n  \"devDependencies\": {\n    \"webpack-dev-server\": \"^2.4.2\"\n  }\n}\n```\n\n## Конфигурация ##\n\nКак и все в Rails, webpack следует поределенным соглашениям\n\n### 1. Структура каталогов ###\n\nОбратите внимание на каталог `app/javascript`.\nОн содержит весь *JavaScript* код приложения и вхождения *webpack*.\n\nПо соглашению, модули размещаются в каталоге `app/javascript`,\nвсе вхождения webpack должны быть размещены в каталоге `app/javascript/packs`.\n\nПо умолчанию, в демонстрационных целях,\nwebpacker генерирует `application.js` внутри каталога `packs`.\n\n### 2. Конфигурация Webpack ###\n\nТакже, для каждой среды, генератор  создает конфигурации webpack,\nрасположенные в директории `config/webpack`.\n\n#### shared.js ####\n\n```javascript\nconst webpack = require('webpack')\nconst { basename, dirname, join, relative, resolve } = require('path')\nconst { sync } = require('glob')\nconst { readdirSync } = require('fs')\nconst ExtractTextPlugin = require('extract-text-webpack-plugin')\nconst ManifestPlugin = require('webpack-manifest-plugin')\nconst extname = require('path-complete-extname')\nconst { env, paths, publicPath, loadersDir } = require('./configuration.js')\n\nconst extensionGlob = `**/*{${paths.extensions.join(',')}}*`\nconst packPaths = sync(join(paths.source, paths.entry, extensionGlob))\n\nmodule.exports = {\n  entry: packPaths.reduce(\n    (map, entry) =\u003e {\n      const localMap = map\n      const namespace = relative(join(paths.source, paths.entry), dirname(entry))\n      localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry)\n      return localMap\n    }, {}\n  ),\n\n  output: { filename: '[name].js', path: resolve(paths.output, paths.entry) },\n\n  module: {\n    rules: readdirSync(loadersDir).map(file =\u003e (\n      require(join(loadersDir, file))\n    ))\n  },\n\n  plugins: [\n    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),\n    new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[hash].css' : '[name].css'),\n    new ManifestPlugin({ fileName: paths.manifest, publicPath, writeToFileEmit: true })\n  ],\n\n  resolve: {\n    extensions: paths.extensions,\n    modules: [\n      resolve(paths.source),\n      resolve(paths.node_modules)\n    ]\n  },\n\n  resolveLoader: {\n    modules: [paths.node_modules]\n  }\n}\n```\nОбщий конфигурационный файл содержит базовую конфигурацию webpack,\nобратите внимание на `glob`, которая проверяет все каталоги `pack`,\nищет любые файлы с расширением `*.js` и устанавливает их как точки входа.\n\nКонечно, вы можете изменить имя директории так, как необходимо вашему приложению.\n\nТак же,  обратите внимание на `rails-erb-loader`,\nтак мы можем связать *sprocket* ресурсы с JavaScript файлами,\nдля этого достаточно просто добавить их с расширением `.erb`.\n\n```erb\n// app/javascript/calendar/calendar.js.erb\n\n\u003c% helpers = ActionController::Base.helpers %\u003e\nvar calendarIcon = \"\u003c%= helpers.image_path('calendar-icon.png') %\u003e\";\n```\n\nОстальное, это стандартная конфигурация Webpack2.\n\n#### development.js ####\n\n```javascript\nconst merge = require('webpack-merge')\nconst sharedConfig = require('./shared.js')\n\nmodule.exports = merge(sharedConfig, {\n  devtool: 'sourcemap',\n\n  stats: {\n    errorDetails: true\n  },\n\n  output: {\n    pathinfo: true\n  }\n})\n```\n\nЭтот файл расширяет стандартную конфигурацию,\nи добавляет полезные для режима разработки опции в соответствующую среду.\n\n#### production.js ####\n\n```javascript\nconst webpack = require('webpack')\nconst merge = require('webpack-merge')\nconst CompressionPlugin = require('compression-webpack-plugin')\nconst sharedConfig = require('./shared.js')\n\nmodule.exports = merge(sharedConfig, {\n  output: { filename: '[name]-[chunkhash].js' },\n\n  plugins: [\n    new webpack.optimize.UglifyJsPlugin(),\n    new CompressionPlugin({\n      asset: '[path].gz[query]',\n      algorithm: 'gzip',\n      test: /\\.(js|css|svg|eot|ttf|woff|woff2)$/\n    })\n  ]\n})\n```\n\nЭтот файл так же расширяет базовую конфигурацию,\nи содержит нексколько оптимизационных опций для производственной среды.\n\nВ действительности, приложение может иметь более тонкие настройки оптимизации,\nвы можете указать их, исходя из ваших конкретных условий,\nно в качестве отправной точки достаточно и этих.\n\n#### Живая перезагрузка ####\n\nWebpacker предоставляет обертку для запуска `webpack-dev-server`\nкоторый поддерживает перезагрузку кода налету в среде разработки.\n\nПросмотрите `environments/development.rb`\nи обратите внимание на конфигурацию адреса серврера разработки.\n\n```\nconfig.x.webpacker[:dev_server_host] = “http://localhost:8080\"\n```\n\n## Применим это на практике ##\n\n### 1. Установка ###\n\nИзначально, для обслуживания нескольких процессов,\nв группу разработки в `Gemfile` необходимо добавить [foreman](https://github.com/ddollar/foreman),\nсобрать зависимости с помощью `bundle install`.\n\nЗатем, создать два файла `Procfile` и `Procfile.dev` в корне проекта.\n\n#### Procfile ####\n\n```\nweb: bundle exec puma -p $PORT\n```\n\n#### Procfile.dev ####\n\n```\nweb: bundle exec rails s\n# watcher: ./bin/webpack-watcher\nhot: ./bin/webpack-dev-server\n```\n\nКроме того, настроим небольшую обертку для запуска `Procfile.dev`,\nсоздадим файл внутри `bin/*` каталога под названием `server` и вставим в него следующий код:\n\n```\n#!/bin/bash -i\nbundle install\nbundle exec foreman start -f Procfile.dev\n```\n\nСделаем его исполняемым: `chmod +x ./bin/server`.\n\nТеперю мы можем просто выполнить `./bin/server` в корне приложения,\nчто запустит `Procfile.dev`, обеспечивающий работу `webpack` и `puma`.\n\n### 2. Код приложения ###\n\nТеперь, воспользуемся немного доработанным примером кода,\nполученным при установке Vue.js.\nCоберем все вместе, чтоб посмотреть как это работает.\n\n**app/javascript/packs/app.js**\n\n```javascript\n/* eslint no-console: 0 */\nimport Vue from 'vue/dist/vue.esm'\nimport  Modal from '../components/modal.vue'\ndocument.addEventListener('DOMContentLoaded', () =\u003e {\n  const app = new Vue({\n    el: '#app',\n    data: { showModal: false },\n    components: { Modal }\n  })\n})\n```\n\nв каталоге `app/javascript/components/` содержит однофайловые компоненты `vue`\n\nнапример: **app/javascript/packs/components/modal.vue**\n\n```vue\n\u003ctemplate lang=\"pug\"\u003e\ntransition(name=\"modal\")\n  .modal-mask\n    .modal-wrapper\n      .modal-container\n        .modal-header\n          slot(name=\"header\") default header\n        .modal-body\n          slot(name=\"body\") default body\n        .modal-footer\n          button.modal-default-button(@click=\"$emit('close')\") Close \n\u003c/template\u003e\n\n\u003cscript\u003e\nmodule.exports = { name: 'modal' }\n\u003c/script\u003e\n\n\u003cstyle lang=\"stylus\"\u003e\n#app\n  text-align: center\n\n.modal-mask\n  position: fixed\n  z-index: 9998\n  top: 0\n  left: 0\n  width: 100%\n  height: 100%\n  background-color: rgba(0, 0, 0, .5)\n  display: table\n  transition: opacity .3s ease\n  \n.modal-wrapper\n  display: table-cell\n  vertical-align: middle\n  \n.modal-container\n  width: 300px\n  margin: 0px auto\n  padding: 20px 30px\n  background-color: #fff\n  border-radius: 2px\n  box-shadow: 0 2px 8px rgba(0, 0, 0, .33)\n  transition: all .3s ease\n  font-family: Helvetica, Arial, sans-serif\n  \n.modal-header h3\n  margin-top: 0\n  color: #42b983\n  \n.modal-body\n  margin: 20px 0\n  \n.modal-enter\n  opacity: 0\n  \n.modal-leave-active\n  opacity: 0\n  \n.modal-enter .modal-container,\n.modal-leave-active .modal-container\n  transform: scale(1.1)\n\u003c/style\u003e\n```\n\n\u003e Компонент *модального окна* взят из\n\u003e [примера](https://ru.vuejs.org/v2/examples/modal.html) в документации `Vue.js`.\n\n### 3.  Представление ###\n\nНапоследок, для добавления этого в представление, сгенерируем контроллер:\n\n```\nbundle exec rails g controller front index\n```\n\nВ `routes.rb` укажем этот экшн как корневой маршрут:\n\n```ruby\nroot ‘front#index’\n```\n\nГлавный шаблон приложения `layouts/application.html.slim` следующий:\n\n```slim\ndoctype html\nhtml\n  head\n    = render partial: 'layouts/meta'\n    = csrf_meta_tags\n    = stylesheet_pack_tag 'app'\n    = javascript_pack_tag 'app'\n  body\n    #app\n      = yield\n```\n\nОбратите внимание на вспомогательную функцию `javascript_pack_tag`,\nона будет принимать скомпилированный скрипт,\nи выводитть в приложении ссылку на него следующим образом:\n\n```html\n\u003cscript src=”http://localhost:5000/app.js\"\u003e\u003c/script\u003e\n```\n\nШаблон с пользовательским компонентом\n\n```slim\n//app/views/front/index.html.slim`\nbutton(id=\"show-modal\" @click=\"showModal = true\") Show Modal\nmodal(v-if=\"showModal\" @close=\"showModal = false\")\n  h3(slot=\"header\") component Modal\n  p(slot=\"body\") Vue.js for Ruby on Rails\n```\n\n### 4. Запуск ###\n\nОткроем терминал в текущей директории, и выполгним:\n\n```bash\n./bin/server\n# или напрямую\nbundle exec foreman start -f Procfile.dev\n```\n\nТеперь перейдя в браузере по адресу  ` http://localhost:5000/`\nмы увидим наше работающее приложение.\n\n## Развертывание ##\n\nПоследний но не менее важный этап - выгрузка приложения в рабочую среду.\nМы развернем свое приложение в Heroku.\nБольшинство настроек аналогично развертке обычного Rails приложения, однако,\nтака как мы используем Node.js, мы добавим соответствующий пакет сборки\n`node.js buildpack`.\n\n```bash\nheroku create\nheroku addons:create heroku-postgresql:hobby-dev\nheroku config:add NPM_CONFIG_PRODUCTION=false\nheroku buildpacks:add --index 1 heroku/nodejs\nheroku buildpacks:add --index 2 heroku/ruby\n```\n\nВыполнение команды `git push heroku master` в корневом каталоге приложения,\nвыгрузит его на Heroku.\n\n## Ресурсы ##\n\n- [Introduction Webpacker](https://medium.com/statuscode/introducing-webpacker-7136d66cddfb#.si6rwj56t)\n- [Webpacker](https://github.com/rails/webpacker): Webpacker gem\n- [Webpack 2](https://webpack.js.org/): Webpack официальный сайт\n- [Yarn](https://yarnpkg.com/en/): Менеджер пакетов для node\n\n**Больше примеров кода в этих репозиториях**\n\n- https://github.com/gauravtiwari/webpacker-example-app\n- https://github.com/gauravtiwari/rails-webpacker\n- https://github.com/gauravtiwari/webpacker-vue\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultpix%2Frails-webpacker-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmultpix%2Frails-webpacker-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultpix%2Frails-webpacker-vue/lists"}