Я не знаю, как использовать жизненный цикл в svelte. js - PullRequest
Новая
       35

Я не знаю, как использовать жизненный цикл в svelte. js

2 голосов
/ 22 января 2020

Допущения

Я не знаю много о внешнем интерфейсе.

хочет сделать

Я хочу использовать жизненный цикл с svelte js.

Произошла ошибка

Произошла следующая ошибка, а метод жизненного цикла недоступен: 

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

Я изменил свой код соответственно , но это не сработало.

код

пакет. 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
                    }
                }
            }
        ]
    }
};

test-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>

приложение. 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>

1 Ответ

2 голосов
/ 24 января 2020

Я думаю, что ваша ошибка в том, что у вас нет .mjs в вашем веб-пакете resolve.extensions. Файл, выделенный сообщением об ошибке ./internal, на самом деле является .mjs файлом, но у вас есть только .svelte extensions ...

Это должно быть примерно так: 

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