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

Question

假设

对前端了解不多

想做

我想在 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
                    }
                }
            }
        ]
    }
};

测试-component.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>

Answer 1

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

应该是这样的：

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

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

I don't know how to use life cycle in svelte.js

javascript

node.js

npm

yarnpkg

svelte

假设

想做

发生错误

代码