标签: webpacker

我正在使用Rails 5.1和Vue.js启动一个新的应用程序,内置的Webpacker Vue.js包(通过--webpack = vue标志生成).

我试图了解使用普通的Rails MVC应用程序与Rails API应用程序(使用--api标志生成Rails应用程序)的优缺点.

$ rails new someapp --webpack=vue
      vs.
$ rails new someapp --api --webpack=vue

鉴于自2015年以来Rails API已经合并到核心这一事实,并且通过Webpacker gem内置的Webpack是全新的(Rails 5.1,2017),那么构建Rails应用程序的最佳方式是什么呢？是Vuejs？或者,主要是Vuejs？

坚持使用Webpacker Vue的常规Rails,或使用Webpacker Vue的Rails API？有什么权衡？

这个答案中的一部分将简单地归结为关于全栈MVC应用与使用API​​的SPA应用的对话.但是,我是否应该考虑任何特定的Rails Way + Vue.js组件工作流程,除了"这是一个完整的MVC应用程序与SPA应用程序的问题".

我想要注意的是,我意识到答案会有点风格偏好.有些人可能更喜欢其中一个.

两者都可行,但我想考虑易用性,兼容性和以另一种方式做到这一点的权衡.

谢谢.

在运行rails test. 失败的测试可以是任何文件中的任何测试。

此错误通常发生在 CI/CD 过程中的测试环境中。在当地，这种情况很少发生。

这是一个完整的堆栈跟踪：

Error:
SitePositionsControllerTest#test_should_create_position_link:
ActionView::Template::Error: 785: unexpected token at ''
    app/views/layouts/site/application.html.erb:10
    test/controllers/site_positions_controller_test.rb:28:in `block (2 levels) in <class:SitePositionsControllerTest>'
    test/controllers/site_positions_controller_test.rb:27:in `block in <class:SitePositionsControllerTest>'
    test/test_helper.rb:64:in `block (3 levels) in run'
    test/test_helper.rb:63:in `block (2 levels) in run'
    test/test_helper.rb:62:in `block in run'
    test/test_helper.rb:54:in `run'

rails test test/controllers/site_positions_controller_test.rb:18

我是 Rails 的新手，正在努力让 Jquery 和 Bootstrap 与 Rails 6 一起工作。我认为这与将应用程序从 rails 5 切换到 rails 6 并使用 webpacker 加载 Jquery 而不是将其作为 gem 加载有关。我已经完成了有关此操作的说明，但它似乎仍然无法正常工作。有人帮我解决了一个更具体的问题，并让我将其粘贴到视图中，然后似乎使它起作用：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

但是，这感觉像是一种解决方法，我希望 Jquery 在所有视图中都可用。以下是 /javascript/packs/application.js 的副本：

require("jquery")
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("bootstrap/dist/js/bootstrap")

import '../stylesheets/application'
import './bootstrap_custom.js'


//= require jquery3
//= require popper
//= require bootstrap-sprockets

和/config/webpack/environment.js：

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = …

我目前正在尝试在我的应用程序中实现一个日期选择器，问题是没有关于如何jquery-ui-rails通过 webpacker添加gem 的文档。

可能还有另一种方法可以添加宝石或其他适合我需要的宝石？

我正在使用 Rails 5.2 应用程序，并且有一个application.scss文件填充了各个导入

@import '../stylesheets/pages/home';
@import '../stylesheets/pages/product_details';
@import '../stylesheets/pages/cart';
@import '../stylesheets/pages/downloads';

这既费力又容易出错，所以我更喜欢使用通配符

@import '../stylesheets/components/*';

然而，这失败了。当我运行时bin/webpack，出现以下错误：

ERROR in ./app/webpacker/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/lib/loader.js??ref--7-3!./app/webpacker/stylesheets/application.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import '../stylesheets/components/*';
^
File to import not found or unreadable: ../stylesheets/components/*.

我在使用@rails/webpacker加载本地字体文件时遇到问题。字体在开发环境中加载，但不在生产环境中加载。这似乎是一个非常简单的问题，但我遇到了很多麻烦。下面是我的@font-face 代码。我的字体存储在 app/assets/images/fonts

应用程序 > 资产 > 样式表 > 配置 > _fonts.scss

@font-face {
  font-family: "Axiforma";
  src: url("fonts/Kastelov-AxiformaRegular.eot"); /* IE9 Compat Modes */
  src: url("fonts/Kastelov-AxiformaRegular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/Kastelov-AxiformaRegular.otf") format("opentype"), /* Open Type Font */
    url("fonts/Kastelov-AxiformaRegular.svg") format("svg"), /* Legacy iOS */
    url("fonts/Kastelov-AxiformaRegular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/Kastelov-AxiformaRegular.woff") format("woff"), /* Modern Browsers */
    url("fonts/Kastelov-AxiformaRegular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: 400;
  font-style: normal;
}

在生产模式下获取字体文件会导致 404 错误。当我预编译资产时，我可以看到字体文件的文件名附加了一个哈希值。在传递给浏览器的 css 文件中，字体文件的 url 保持不变。为了解决这个问题，我尝试在环境模块规则中使用file-loader、url-loader和resolve-url-loader …

我有一件非常奇怪的事情发生。

我在我的开发环境中从事这个项目，当我曾经启动 Rails 服务器时，

它会在第一个浏览器请求时编译 webpack。

现在，突然之间，这并没有发生，导致所有 javascript 和样式失败，并且应用程序无法正确呈现。

Rails 服务器控制台甚至不显示 [Webpacker] Compiling… 行

如果我自己启动 webpack-dev-server，它就可以工作。但出于某种原因，rails 服务器刚刚停止了自己的工作。我已经在 webpacker.yml 中将 webpack_compile_output: false 更改为 true 但 rails 服务器仍然没有显示任何与 Webpack 相关的内容。

这真的很奇怪。我没有添加任何 gems 或更新任何版本的 node 或 webpack。我确实在我的机器上将 Git 从 1.9 版全局更新到了 2.24 版，但仅此而已。

有任何想法吗？

更新：（根据要求，这是我的 config/wenpacker.yml 的内容

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we …

随着 Webpacker 加入 Ruby On Rails，我找不到使用 JavaScript 函数的方法。

我有一个app-globals.js用函数调用的文件来测试：

function alerts() {
  alert("TEST")
}

然后我想在我的一个观点中使用它：

<% = button_tag 'Button', type: 'button', onClick: 'alerts ()'%>

但是当我按下按钮时，这个错误显示在浏览器控制台中：

ReferenceError: alerts is not defined

1. 我将app-globals.js文件放入"app/javascript"并"app/ javascript/packs/application.js"放入 require ("app-globals")。

2. 我将 app-globals.js 移至 .js"app/javascript/packs"并从application.js.

无论哪种情况，仍然会出现错误。

我正在设置我的 Storybook 实例以从我的 Rails 应用程序加载样式，但它无法加载我的main.scss文件中的导入，两者都是来自node_modules以下位置的样式表：

@import 'react-table/react-table.css';
@import 'animate.css';

当我尝试运行我的故事书实例时收到错误：

ERROR in ./app/javascript/stylesheets/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--9-2!./app/javascript/stylesheets/main.scss)
Module not found: Error: Can't resolve './animate.css' in '<my_project>/app/javascript/stylesheets'
 @ ./app/javascript/stylesheets/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--9-2!./app/javascript/stylesheets/main.scss) 4:40-111
 @ ./app/javascript/stylesheets/main.scss
 @ ./stories/1-Table.stories.js
 @ ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^\/]*?\.stories\.js\/?)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./app/javascript/stylesheets/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--9-2!./app/javascript/stylesheets/main.scss)
Module not found: Error: Can't resolve './react-table/react-table.css' in '<my_project>/app/javascript/stylesheets'
 @ ./app/javascript/stylesheets/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--9-2!./app/javascript/stylesheets/main.scss) 3:40-127
 @ ./app/javascript/stylesheets/main.scss
 @ ./stories/1-Table.stories.js
 @ ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^\/]*?\.stories\.js\/?)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true …

当我在开发环境中运行 Rails 6.0 应用程序时，我在development.log 上得到下一条跟踪信息

[Webpacker] Compiling\xe2\x80\xa6\n[Webpacker] Compilation failed:\n/home/alejo/rails_project/node_modules/webpack-cli/bin/cli.js:93\n                throw err;\n                ^\n\nError: Cannot find module '@rails/webpacker'\nRequire stack:\n- /mnt/config/webpack/environment.js\n- /mnt/config/webpack/development.js\n- /home/alejo/rails_project/node_modules/webpack-cli/bin/utils/convert-argv.js\n- /home/alejo/rails_project/node_modules/webpack-cli/bin/cli.js\n- /home/alejo/rails_project/node_modules/webpack/bin/webpack.js\n    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:954:17)\n    at Function.Module._load (internal/modules/cjs/loader.js:847:27)\n    at Module.require (internal/modules/cjs/loader.js:1016:19)\n    at require (/home/alejo/rails_project/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)\n    at Object.<anonymous> (/mnt/config/webpack/environment.js:1:87)\n    at Module._compile (/home/alejo/rails_project/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)\n    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1160:10)\n    at Module.load (internal/modules/cjs/loader.js:976:32)\n    at Function.Module._load (internal/modules/cjs/loader.js:884:14)\n    at Module.require (internal/modules/cjs/loader.js:1016:19)\n    at require (/home/alejo/rails_project/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)\n    at Object.<anonymous> (/mnt/config/webpack/development.js:3:21)\n    at Module._compile (/home/alejo/rails_project/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)\n    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1160:10)\n    at Module.load (internal/modules/cjs/loader.js:976:32)\n    at Function.Module._load (internal/modules/cjs/loader.js:884:14)\n    at Module.require (internal/modules/cjs/loader.js:1016:19)\n    at require (/home/alejo/rails_project/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)\n    at WEBPACK_OPTIONS (/home/alejo/rails_project/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)\n …