标签: webpacker

我正在尝试将JS 路由 gem与来自 Rails 5.1 的webpacker一起使用，但无法弄清楚如何js-routes.js.erb在 webpack 的app/javascript/packs/application.js.

import 'js-routes'

造成

Uncaught Error: Cannot find module "js-routes"

这可能意味着 webpack 无法在包含的 gem 中找到 javascript。这可能与这个webpacker 的 github 问题有关。

目前解决此问题的最佳方法是什么？

谢谢！

使用 Capistrano 时，我注意到当使用 来创建符号链接时current -> /var/www/myapp，编译需要很长时间。事实上，我等了大约 5 到 10 分钟并取消了该过程。

它挂在这部分：

00:09 deploy:assets:precompile
      01 $HOME/.rbenv/bin/rbenv exec bundle exec rake assets:precompile
      01 yarn install v0.27.5
      01 [1/4] Resolving packages...
      01 [2/4] Fetching packages...
      01 warning fsevents@1.1.2: The platform "linux" is incompatible with this module.
      01 info "fsevents@1.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
      01 [3/4] Linking dependencies...
      01 [4/4] Building fresh packages...

如果我删除current符号链接，它仍然需要一段时间，但它会完成。

00:09 deploy:assets:precompile
      01 $HOME/.rbenv/bin/rbenv exec bundle exec rake …

我有 webpacker 为基本的 vue.js/rails 应用程序工作，但我想对其进行配置，以便触控笔文件编译为 css，以便我可以使用 Vuetify。有谁知道如何做到这一点？我现有的独立工作 vuetify/vue.js 应用程序具有以下 webpack 配置：

module: {
loaders: [
  {
    test: /\.vue$/,
    loader: 'vue'
  }, 
  {
      test: /\.s[a|c]ss$/,
      loader: 'style!css!sass'
  }
]
},
vue: {
  loaders: {
    scss: 'style!css!sass'
  }
}

webpacker 的语法似乎与 webpacker 有点不同。我的 rails 应用程序有 /config/webpack/environment.js

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

environment.loaders.set('styl', {
test: /\.styl$/,
use: 'stylus-loader'
}),
environment.loaders.set('styl', {
test: /\.s[a|c]ss$/,
use: 'style!css!sass'
})
module.exports = environment

但我收到此错误： 未定义变量：“$chip-label-color”.in /rails_project_path/node_modules/vuetify/dist/vuetify.min.css（第 6 行，第 134917 列）

有没有人有如何使用 Rails Webapcker 配置 Vuetify 的例子？

我一直在遵循本指南和本指南，使用 webpacker 在 Rails 5.1 上使用 vue-test-utils 和 vue 2 设置玩笑测试。我可以在没有 vue 组件的情况下运行基本测试，但是尝试挂载 vue 组件会导致错误：

   TypeError: Cannot create property '_Ctor' on string 'PostAddress'

       7 |
       8 |   it('mounts', () => {
    >  9 |     let wrapper = shallow('PostAddress');
      10 |
      11 |     expect(1 + 1).toBe(2);
      12 |   });

      at Function.Vue.extend (node_modules/vue/dist/vue.runtime.common.js:4785:67)
      at createConstructor (node_modules/@vue/test-utils/dist/vue-test-utils.js:4562:25)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:4654:12)
      at shallow (node_modules/@vue/test-utils/dist/vue-test-utils.js:4691:10)
      at Object.<anonymous> (spec/javascript/PostAddress.spec.js:9:19)

我的测试文件PostAddress.test.js如下所示：

import { mount } from '@vue/test-utils'  // mounts with children …

环境宝石：Rails 5.2.1 Webpacker 3.5.5

这是我的 package.json

{
  "private": true,
  "scripts": {
    "test": "jest",
    "build": "./bin/webpack"
  },
  "devDependencies": {
    "autoprefixer": "9.1.1",
    "jest": "23.4.1",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "2.11.2",
    "babel-core": "~6.26.3",
    "babel-loader": "^7.0.2",
    "babel-preset-react": "~6.24.1",
    "postcss-loader": "~3.0.0",
    "sass-loader": "~7.1.0",
    "webpack": "^3.5.5"
  },
  "jest": {
    "roots": [
      "app/specs/"
    ]
  },
  "dependencies": {
    "@rails/webpacker": "3.5",
    "prop-types": "~15.6.2",
    "react": "~16.5.2",
    "react-dom": "~16.5.2"
  }
}

webpacker.yml.jsx在该extensions部分中接受。

这是我的 .babelrc

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": "> 1%",
          "uglify": true …

我在使用 Ruby on Rails Webpacker 在视图中包含图像时遇到问题。当我尝试使用 html img 标签和 asset_pack_path 在我的视图中插入图像时，出现错误。我的图像位于app/javascript/images/logo.png. 根据 webpacker 文档，我应该将 /media/ 附加到文件中，但这无济于事。我尝试了不同的路径，但仍然无法正常工作。我认为 webpacker 不会编译我的图像。

Webpacker::Manifest::MissingEntryError in Home#index
Showing app/views/layouts/application.html.haml where line #14 raised:

Webpacker can't find media/logo.png in public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack …

我正在从使用资产管道迁移到 Rails 5.2 中的 webpacker。我的 AJAX 响应都导致Uncaught ReferenceError: $ is not defined浏览器控制台中的 rails-ujs.js 错误。

我已经设置了我的 webpacker 环境以包含 jquery。

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;

我在我的 ../packs/application.js 中导入了 rails-ujs 和 turbolinks

import Rails from 'rails-ujs'
import 'activestorage'
import 'bootstrap'
...
import Turbolinks from "turbolinks"

Rails.start();
Turbolinks.start();

// Import application specific stuff
import 'application/javascripts'

然后我尝试在请求完成时添加一个类。类似于 Rails 指南中显示的内容 https://guides.rubyonrails.org/working_with_javascript_in_rails.html#server-side-concerns

我的 show.js.erb 文件看起来像这样

$("#result").addClass("active") …

我有一个 Rails 6 应用程序，并使用 Webpacker 作为资产。

我在文件中有以下代码app/javascript/packs/application.js：

export var Greeter = {
    hello: function() {
        console.log('hello');
    }
}

我的一个视图 (HTML) 文件中有以下脚本：

<script>
 $(document).ready(function(){
   Greeter.hello();
 });
</script>

注意：我正在使用 JQuery，它工作正常。

我收到以下错误：

未捕获的 ReferenceError: Greeter未定义。

我们如何使用libraryTarget和library公开捆绑的模块，以便也可以从 HTML 文件访问它？

或者，有没有其他方法可以使用 Rails Webpacker 做到这一点？

任何帮助将非常感激！

我正在使用 Webpacker 编写 Rails 6 webapp。我的理解是 Rails 6 中的自动前缀通过 PostCSS 和它的 autoprefixer 插件开箱即用。

但是我无法验证这个库是否实际上是我的 css 的前缀。

有没有办法确认标准默认 Rails 6.0.0 应用程序是否开箱即用自动前缀？

我已经跑去yarn autoprefixer --info看了它适用的 css 规则和浏览器，以及它适用于我的浏览器的 def chrome 77。我尝试使用它列出为适用的参数。然而，它仍然没有在开发或生产中显示任何带前缀的 css。

我不确定它是如何postcss-preset-env工作的，所以我不确定在使用需要前缀的浏览器时 css 是否只有前缀。

我来自使用 autoprefixer-rails gem，它挂在链轮上，只是给所有东西加上前缀。

这是我的.postcss.config.js文件...

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

目前，我们的应用程序使用 Rails 6。它在生产中运行良好，但在开发模式下会引发一些错误。请帮助我。

这就是我的 application.js 和 application.css 的样子

包/application.js

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

import '../stylesheets/application'
import './bootstrap_custom.js'
import './side_menu.js.erb'
//import './sweetalert.js'
import './business_hours.js'
import './admin.js'
import './services.js'
import './user_service.js' 

包/样式表/application.scss

@import './bootstrap_custom.scss';

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; 
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import './admin_dashboard.scss';
@import './side_menu.css';
@import './fonts.scss'; 
@import './login.css';