javascript - 我不知道如何在 svelte.js 中使用生命周期

转载作者：太空宇宙更新时间：2023-11-03 21:50:30

26

4

假设

我对前端了解不多。

想做

我想将生命周期与 sveltejs 一起使用。

发生错误

出现以下错误，生命周期方法不可用:

ERROR in ./node_modules/svelte/index.mjs
Module not found: Error: Can't resolve './internal' in 'C:\project\test_svelte_lifecycle\node_modules\svelte'
 @ ./node_modules/svelte/index.mjs 1:0-167 1:0-167 1:0-167 1:0-167 1:0-167 1:0-167 1:0-167 1:0-167 1:0-167 1:0-167
 @ ./test-component.svelte
 @ ./app.js
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

这是什么原因造成的？

我从公式中得到了这个代码。然而，出现了错误，并没有起作用。我不知道为什么。

有同样错误的人做了一个github问题。

https://github.com/sveltejs/svelte/issues/2937

我相应地修改了我的代码，但它不起作用。

代码

package.json

{
  "dependencies": {
    "svelte": "^3.17.2",
    "svelte-loader": "^2.13.6",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
  "peerDependencies": {
    "svelte": "^3.17.2"
  }
}

<小时/>

webpack.config.js

const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, 'app.js'),

    output: {
        path: path.resolve(__dirname, './dist/'),
        filename: 'bundle.js'
    },

    resolve: {
        alias: {
            svelte: path.resolve('node_modules', 'svelte')
        },
        extensions: ['.svelte'],
        mainFields: ['svelte', 'browser', 'module', 'main']
    },

    module: {
        rules: [
            {
                test: /\.(html|svelte)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'svelte-loader',
                    options: {
                        customElement: true
                    }
                }
            }
        ]
    }
};

<小时/>

测试组件.svelte

<script>
  import { onMount } from "svelte";

  let hello = "hello";
  let world = "world";

  onMount(async () => {
    hello = "hello hello";
  });
</script>

<svelte:options tag="test-component" />

<div>{hello} and {world}</div>

<小时/>

app.js

import TestComponent from './test-component.svelte';

<小时/>

index.html

<html>

<head>
    <meta charset="utf8">
    <script src="./dist/bundle.js"></script>
</head>

<body>
    <test-component></test-component>
</body>

</html>

最佳答案

我认为您的错误是因为您的 webpack 的 resolve.extensions 中没有 .mjs 。错误消息 ./internal 指出的文件实际上是一个 .mjs 文件，但您只有 .svelte 扩展名...

应该是这样的:

  resolve: {
    alias: {
      svelte: path.resolve('node_modules', 'svelte'),
    },
    extensions: ['.mjs', '.js', '.svelte'],
    mainFields: ['svelte', 'browser', 'module', 'main'],
  },

关于javascript - 我不知道如何在 svelte.js 中使用生命周期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59856447/

26

4

0

文章推荐： node.js - 云函数: No document found

文章推荐： c# - 使用事件来集中信息

文章推荐： javascript - 创建一个在 Javascript 中循环的精确毫秒计时器

文章推荐： jQuery - 从输入中获取值，然后将它们设置为样式

svelte - svelte 编译背后的概念是什么？
我看了你的文章 https://svelte.dev/blog/virtual-dom-is-pure-overhead和其他一些博客，但它们解释了与虚拟 dom 相比，svelte 如何更好。而我想
svelte - Svelte 中的单例
我正在尝试制作一个 Svelte 应用程序，其中我有一个创建 audioSource 并管理它的类(不是 svelte 组件)。我想跨多个组件获取此类实例。现在，我发现的唯一方法是这样做:
svelte - Svelte 中不相关组件之间的实时数据共享
我有一个案例，我打开了两个选项卡 localhost:5000/和localhost:5000/stream并想更新 / 中的变量路径并查看 stream 中的更改实时路径。存储不是这样工作的，如果我
svelte - svelte 中的文件输入不更新数据
我正在尝试创建一个带有客户端文件输入的网站，其中一些数据完全在客户端上处理，并且不会发送到服务器。我有以下 Svelte 组件 (App.svelte): let data; function h
svelte - svelte 中的文件输入不更新数据
我正在尝试创建一个带有客户端文件输入的网站，其中一些数据完全在客户端上处理，并且不会发送到服务器。我有以下 Svelte 组件 (App.svelte): let data; function h
svelte - 如何在本地运行的 Svelte REPL 站点中使用本地构建的 Svelte 3 编译器？
我正在研究 Svelte，并从其 Github 存储库中克隆了它。我可以从站点目录运行 REPL，但它使用来自 unpkg url 的 Svelte。我想尝试我本地构建的编译器并使用它而不是 unpk
svelte - 将样式添加到 svelte js 中的 svelte-routing Link 标签
我想将样式添加到在纤细路由中标记，但我不能。我试图添加一个有一些样式的类，但它没有用。该类包含: .link { text-decoration: none; } 有没有人对此有解决方案
svelte - 在生产环境中隐藏来自开发者工具的原始 .svelte 文件
目前，当我在浏览器中打开开发人员工具时，我可以看到我的原始 svelte 组件，我想隐藏此信息并仅发送丑陋的代码。这是我打开开发者工具时得到的。我正在构建一个单页应用程序。这是我的 rollup.
svelte - 如何在 Svelte 中创建一个可在所有页面中使用的上下文？
我目前正在学习 Svelte，我想为这个副项目创建一个身份验证流程。通常，在 React 中，我习惯使用 Contexts 保存身份验证信息。我想知道 Svelte 是否也可以执行类似的
svelte - 如何替换 Svelte 中目标的内容而不是附加到子项？
调用 new Component({ target }) 将组件附加到目标，我想用新组件替换目标的所有旧内容。我该怎么做？最佳答案如果您正在混合服务器呈现的标记，最好使用 hydrate: tru
svelte - 是否可以将 Svelte 商店作为组件的属性传递？
我有一个简单的 REPL example用于简单的列表详细信息编辑器。它由三个部分组成: Annotation是细节 Annotations遍历数据并创建 Annotation实例 App是创建 An
svelte - 如何构建实时股票报价的 Svelte 商店
我正尝试在 Svelte 商店中维护实时股票报价，以便屏幕上的出价和要价实时更新。我不确定商店的结构如何来保持数据的 react 性和效率。数据来自 websocket，如下所示: {'symbol'
svelte - Svelte 如何处理在 each 循环中更新数组中的对象
下面是一个非常简单的 Svelte 组件。当您单击该按钮时，它会更新 pages[2].name。 Svelte 如何处理这个问题？它是否重新评估所有 3 个 DIV？或者它是否知道只修改第 3 个
svelte - 专注于在 Svelte 组件中点击切换
我制作了一个用于输入财务数字的组件，用于我的输入表单。它现在工作得很好，除了一个奇怪的行为:当我点击输入字段时，它会按预期获得焦点，但是当它已经有焦点时点击它会带走焦点。组件中只有一个 on:cli
svelte - 使用 Svelte 派生存储从多个存储数据创建单个状态对象
我尝试实现一个自定义的 Svelte 商店，它允许我在订阅页面上“抛出”一个单一的状态对象。这是我准备的示例代码: import { derived, writable } from 'svelte/
svelte - 在 svelte 上安装美人鱼
我正在尝试安装带有 Svelte 的 Mermaid 来制作图表。所以我做了以下事情: npm 安装美人鱼然后我得到以下内容: npm WARN svelte-app@1.0.0 No reposi
svelte - 渲染预编译的 svelte 组件
如何渲染使用 svelte.compile() 手动编译的组件？我正在编译这样的组件: import * as svelte from 'svelte/compiler'; var
svelte - 使用 Svelte 更新商店中的数组时未定义
我正在学习 Svelte 以及如何使用它制作自定义商店。我遇到了一个问题，当我尝试使用 update 更新可写数组时，它会在订阅该数组的组件中导致未定义的错误。这是我的商店，我有一个简单的数组，其中
svelte - 如何在 Svelte 中动态渲染组件？
我正在尝试遍历数组以呈现具有 type 值的组件。 import One from './One.svelte'; import Two from './Two.svelte'; import
svelte - 在 Svelte 中的兄弟组件之间传递数据
如何将数据(例如:导航栏标题)传递给父元素中使用的组件？ import Nav from "../components/Nav.svelte"; let navTitle = "MyApp

首页

博学

6Ren·AI

商城

javascript - 我不知道如何在 svelte.js 中使用生命周期

假设

想做

发生错误

代码