小编Ped*_*iva的帖子

我希望你们一切都好。

所以，我面临的问题是，当我指向分支时，webpacker 找不到“ react-visual-filter ”模块。

之前，当一切正常时，这个包指向一个特定的版本：

"react-visual-filter": "^1.0.9"

因此，我创建了一个简单的 PR（#5）并进行了改进，并尝试在模块外测试结果。为了更新 package.json 文件以指向我的分支，我使用了以下命令：

yarn add https://github.com/rfdavid/react-visual-filter.git#feature/add-text-box

package.json 文件已更新为：

"react-visual-filter": "https://github.com/rfdavid/react-visual-filter.git#feature/add-text-box"

好的。我认为一切都很好，但是当 webpacker 尝试编译修改时，会发生这种情况：

Module not found: Error: Can't resolve 'react-visual-filter' in '/path/to/app/javascript/packs'

未找到？

我尝试删除node_modules并用纱线重新安装所有内容，但没有成功。

我可以看到react-visual-filter包已成功安装在node_modules文件夹内，但由于某种原因，找不到它。

有趣的是，在收到此错误后，如果我尝试更新此内容：

import VisualFilter from "react-visual-filter";

到：

import VisualFilter from "react-visual-filter/src";

该模块已找到，但我面临另一个问题：

Module parse failed: Unexpected token (155:6)
You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

等等，什么？那么包存在但可以解析吗？

但这个文件之前解析得很好。我不确定这个错误是否准确。我想我需要以这种方式进行：

import …

我尝试使用 importmap-rails 在 Rails 7 中添加 view_component 。

我以为这很简单：

\n
1. 更新config/initializers/assets.rb为：Rails.application.config.assets.paths << Rails.root.join(\'app\', \'components\')
\n
2. 更新app/assets/config/manifest.js为：//= link_tree ../../components .js.
\n
3. 更新config/importmap.rb为：pin_all_from "app/components", preload: true.
\n

然后我执行了这个命令，bin/importmap json检查一切是否正常：

{\n  "imports": {\n    "application": "/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js",\n    "@hotwired/turbo-rails": "/assets/turbo.min-e5023178542f05fc063cd1dc5865457259cc01f3fba76a28454060d33de6f429.js",\n    "@hotwired/stimulus": "/assets/stimulus.min-b8a9738499c7a8362910cd545375417370d72a9776fb4e766df7671484e2beb7.js",\n    "@hotwired/stimulus-loading": "/assets/stimulus-loading-e6261367928db8327c9ed7b698df4a65be8e60f1e405dd2831e4fab49f716e56.js",\n    "@hotwired/stimulus-importmap-autoloader": "/assets/stimulus-importmap-autoloader-b2f78229539fa8488bcc30c90ec212a3c2558a7ad04cbc9d43f3ecd85c5671f3.js",\n    "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",\n    "controllers/foo_controller": "/assets/controllers/foo_controller-45f660adade47dc60929737489aaf6a096ec0bdefa5dc52e509d79ee66982a6c.js",\n    "controllers": "/assets/controllers/index-c3026cd9f10d126c4d910db40cdee4112b916f0b357ed0d0489c4c493627d462.js",\n    "foo/bar_component_controller": "/assets/foo/bar_component_controller-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js",\n    "foo_component_controller": "/assets/foo_component_controller-0e1379f58b8281a0e5ac54ad8748d2bce7b5da5ddbcb72d91895cf97e47060f2.js"\n  }\n}\n

我在最后一行看到了我的 foo_component_controller.js，这是我为 view_component 创建的文件。好吧，一切看起来都很好，但 UI 上没有任何反应，为什么？

我忘记更新了app/javascript/controllers/index.js。我需要告诉刺激轨道注册“app/view_components”文件夹内的所有控制器。

我正在阅读电子书Rails、Angular、Postgres 和 Bootstrap，第二版。我真的学到了很多。书是 2017 年的，但我正在尝试创建更新所有框架的项目。我想要艰难的方式。呵呵呵呵

所以我使用的是 Rails 6 和 Angular 8。当我试图在 webpack 中为 angular 创建一个组件时，我被卡住了。如何？

我只会描述我认为必要的步骤，所以这就是我所做的：

我创建了 Rails 项目：

rails new angular-on-rails

然后我用 webpacker 添加了 angular：

rails webpacker:install:angular

之后我创建了一个简单的视图：

rails g controller dashboard index

然后，在此视图中，我添加了以下代码：

rails new angular-on-rails

有用！我可以在浏览器中看到 Hello Angular。

之后，我尝试创建一个名为 hello-component 的组件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'hello-component',
  template: `<h1>Hello component</h1>`
})
export class HelloComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

console.log("Hello Component")

不要忘记更新 app.module.ts：

import { BrowserModule …