标签: webpacker

我一直在寻找解决方案，但尚未找到好的策略。

我有一个使用Rails资产管道的巨型AngularJS 1.x应用程序，我的目标是使用UpgradeModule使用Webpacker从angular 1.x缓慢迁移到5.x。

我的问题是...如何使用链轮和资产管道获取旧的javascript文件，使其与Angular 5导入的新Webpack样式配合使用？

我可以将所有内容都放入Webpack，但这需要大量的重构。有没有人对此有任何经验并有好的解决方案？

我刚刚将我的Rails应用程序从5.1.6升级到5.2,并抓住机会将Webpacker从2.0升级到3.4.3.

现在,当我将应用程序推送到Heroku时,我收到以下错误(vendor.js是我的application.html.erb模板中的文件/app/javascript/packs和他所调用的文件之一javascript_pack_tag 'vendor'):

ActionView::Template::Error (Webpacker can't find vendor.js in /app/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 configuration is not creating a manifest. 
Your manifest contains: 
{ 
} 
):

事实上,当我检查内容时,/public我可以看到/packs应该包含我的资产的目录丢失了.

我可以看到,在Heroku的构建阶段,资产是预编译的:

Running: rake assets:precompile …

使用 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 在 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 …

我正在从使用资产管道迁移到 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';

我正在编写前端，这是我第一次需要使用 webpacker 在 RoR 应用程序中连接 babel。我不明白我应该与什么互动才能实现这一点。

我下载了 babel 所需的包：
-babel-code-frame;
-babel-loader;
-babel-plugin-dynamic-import-node;
-babel-plugin-宏。

然后我尝试与Nothing的webpacker.yml文件进行交互config/webpack/*.js.。

在后端，我们使用 ruby​​ 2.5.1 和 rails 6.0.0.rc2v

这是config/webpack/development.js文件：

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const webpack = require('webpack');
const environment = require('./environment')

module.exports = environment.toWebpackConfig()

环境.js文件：

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

environment.plugins.append('ProvidePlugin', new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default'],
}))

module.exports = environment

和 production.js 文件：

process.env.NODE_ENV = process.env.NODE_ENV || 'production'

const environment …