我一直在寻找解决方案，但尚未找到好的策略。
我有一个使用Rails资产管道的巨型AngularJS 1.x应用程序，我的目标是使用UpgradeModule使用Webpacker从angular 1.x缓慢迁移到5.x。
我的问题是...如何使用链轮和资产管道获取旧的javascript文件，使其与Angular 5导入的新Webpack样式配合使用？
我可以将所有内容都放入Webpack，但这需要大量的重构。有没有人对此有任何经验并有好的解决方案？
我正在尝试使用AWS Elastic Beanstalk部署rails 5.1并使用webpacker gem创建反应应用程序.问题是我一直收到以下错误:
Webpacker requires Node.js >= 6.0.0 and you are using 4.6.0
我在我的电脑上使用Node 9.5.0.有什么建议？？
我刚刚将我的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 …我在 vendor/stylesheets 和 vendor/javascript 目录中添加了一些 javascript 和 css 库。我无法在我的 app/javascript/packs/application.js 中导入它们。我使用 webpacker 作为我的资产管道。
ruby-on-rails asset-pipeline ruby-on-rails-5 webpacker ruby-on-rails-5.2
有谁知道是否有办法更新 Rails Webpacker 生成的所有指纹？
我有一个称为manifest.js自动生成的包标签，因此我无法更改内容，但由于某些 CORS 问题，某些浏览器缓存了错误的响应，现在我想将指纹更改为其他内容以刷新缓存。
我注意到在旧的 Rails 资产管道中，资产初始Rails.application.config.assets.version值设定项中有一个选项被调用，但更改此值似乎不会影响 Webpacker 指纹。
谢谢！
我创建了一个新的rails应用程序:
rails new blah --webpack -T
然后我加入了底漆
yarn add primer
如果我在/assets/stylesheets/application.scss中这样做,我的导入工作
@import"~introdunts/index.scss";
Primer有很多模块,所以primer/index.scss然后引用其他模块的文件.因此,即使我将tilda放在我的第一次导入中,它也无法解决问题,因为在其他文件中它没有tilda.
但问题是,一旦index.scss文件加载,还有其他文件停止工作,因为它们也引用如下文件:
// Core modules
@import "primer-base/index.scss";
@import "primer-box/index.scss";
@import "primer-breadcrumb/index.scss";
@import "primer-buttons/index.scss";
@import "primer-table-object/index.scss";
@import "primer-forms/index.scss";
@import "primer-layout/index.scss";
@import "primer-navigation/index.scss";
@import "primer-pagination/index.scss";
@import "primer-tooltips/index.scss";
@import "primer-truncate/index.scss";
所以这些进口也必须改变.我需要解决这个问题,所以我不必用tilda标志作为前缀.我的assets.rb已经包含了node_modules所以我不确定我还能做什么？
我的/initializers/assets.rb有这个:
Rails.application.config.assets.paths << Rails.root.join('node_modules')
然而在我的application.scss文件中,我必须包含tilda标志来引用scss文件:
@import "primer/index.scss";
html {
font-size: 30px;
}
application.js文件:
import "./application.scss";
console.log('Hello World from Webpacker2d');
我的布局文件:
<!DOCTYPE html>
<html>
<head>
<title>Blah</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> …根据 rails/webpacker 文档，extract_css 在生产环境中默认为 true，在开发中默认为 false。从我观察到的：
当 extract_css 为 true 时，webpacker 将从 application.html.erb 中的每个 stylesheet_pack_tag 发出一个 css 文件。
并且，使用extract_css false，stylesheet_pack_tag 返回nil 并且在js 文件中导入的样式表将被提取并捆绑到blob 中并发送到浏览器。因此，存在指向 blob url 的链接标签。
因此，我假设使用 extract_css true 产生与在标题中使用内联样式相同的结果，因为样式与网站文档文件一起下载到浏览器。如果我的理解是正确的，那么在生产中将 extract_css 设置为 true 应该没问题。
我对 extract_css 选项的理解是否正确？
我正在运行我的Rails应用程序并安装了Webpacker。我已经将webpack-dev-server作为Docker容器运行，但它似乎没有响应文件中的更改并重新编译。
谁能检查我的配置以查看是否可以发现任何错误？
docker-compose.yml：
version: '3.7'
services:
app:
build:
context: .
dockerfile: Dockerfile
ports:
- 3000:3000
- 35729:35729
- 5000:5000
env_file:
- '.env'
volumes:
- .:/app
- type: tmpfs
target: /app/tmp/pids/
depends_on:
- database
- elasticsearch
- webpacker
database:
image: postgres:9.6-alpine
env_file:
- '.env'
volumes:
- pg-data:/var/lib/postgresql/data
webpacker:
build: .
command: ./bin/webpack-dev-server
env_file:
- '.env'
volumes:
- .:/app
ports:
- 3035:3035
adminer:
image: adminer
restart: always
ports:
- 8080:8080
elasticsearch:
image: docker.elastic.co/elasticsearch/elasticsearch-oss:6.4.1
env_file:
- '.env'
volumes:
- es-data:/usr/share/elasticsearch/data
ports:
- 9200:9200 …当我们切换到使用Webpack来处理SASS文件时，我们注意到在某些情况下，构建时间变得非常缓慢。在使用SpeedMeasurePlugin测量了构建的不同部分的性能之后，似乎sass-loader是罪魁祸首……它很容易花费10s来构建（在进行一些修复之前通常花费20s），这比我们更长。 d喜欢。
我很好奇，如果人们还有其他策略可以优化构建我没有涵盖的Sass资产。在这一点上，我已经经历了很多（对于其中一些来说是多次），但似乎仍然无法将构建时间降低得足够低。就目标而言，当前的大规模重建（例如更改许多文件中使用的组件）可能很容易花费10-12秒，我希望尽可能将其降低到5s。
我们尝试了多种不同的解决方案，其中一些可行，而其他解决方案却无济于事。
includePaths用于从node_modules加载的SASS-在我发现的git问题上建议使用此方法，在该问题上sass-loader遇到了称为“自定义进口商”的问题。我的理解是，通过使用includePaths，SASS能够依靠那些提供的绝对路径，而不是使用效率低下的算法来解析路径到诸如node_modules的位置从一些简要的统计数据来看，我们似乎在150个SASS文件中散布了约1.6万行SASS代码。有些文件的代码量很大，而其他代码的代码量却很少，这些文件的LOC平均值约为107 LOC /文件。
以下是正在使用的配置。该应用程序是Rails应用程序，因此许多Webpack配置都是通过Webpacker gem处理的。
{
"mode": "production",
"output": {
"filename": "js/[name].js",
"chunkFilename": "js/[name].js",
"hotUpdateChunkFilename": "js/[id]-[hash].hot-update.js",
"path": "myApp/public/packs",
"publicPath": "/packs/"
},
"resolve": {
"extensions": [".mjs", ".js", ".sass", ".scss", ".css", ".module.sass", ".module.scss", ".module.css", ".png", ".svg", ".gif", ".jpeg", ".jpg"],
"plugins": [{
"topLevelLoader": {}
}],
"modules": ["myApp/app/assets/javascript", "myApp/app/assets/css", "node_modules"]
},
"resolveLoader": { …在我的Rails 6项目中，我添加了jQuery pushMenu与
加纱推菜单
来自https://www.npmjs.com/package/push-menu 现在，我可以在node-modules文件夹中看到此内容，为push-menu。但是，当我尝试从包中导入或包含包时，如下所示：
require("push-menu")
我收到以下错误：
Uncaught Error: Cannot find module 'push-menu'
at webpackMissingModule (application.js:12)
at Module../app/javascript/packs/application.js (application.js:12)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83
我的package.json文件看起来像这样
//package.json file
{
"name": "example_setup",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/ujs": "^6.0.0-alpha",
"@rails/webpacker": "^4.0.7",
"jquery": "^3.4.1",
"push-menu": "^2.0.8",
"select2": "^4.0.7",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.7.1"
}
}
我在这里做错了什么？