Svelte REPL 和本地输出的区别

Difference between Svelte REPL and local output

TL;DR:在线 REPL (Svelte 1.9.1) 有效,但本地已损坏。问题:我在本地做错了什么?

以下代码在 this REPL 中有效:

  {{grades}}<br>
  {{#each guesses as guess, i}}
      {{#each guess as slot}}
        {{slot}}
      {{/each}}
        =
      {{ grades[i] }}
  {{/each}}


<script>
  export default {
    data () {
      return {
        guesses: [
          [0, 1, 1, 3, 6],
        ],
        grades: [
          [1, 2, 2],
        ],
      }
    },
  };
</script>

也就是说,它产生输出:

1,2,2

01136 = 1,2,2

但是,在本地(Linux Mint 18.1,64 位上的 Svelte 1.9.1),完全相同的文件会产生以下输出:

1,2,2

01136 = undefined

如您所见,它可以正常访问 grades,但不能访问 #each 循环中的 grades[i]。控制台没有报错。

另外一件神秘的事情

如果我删除这些行:

      {{#each guess as slot}}
        {{slot}}
      {{/each}}

...那么本地渲染就变成了:

1,2,2

= 1,2,2

那么 #each 块是如何突然使 grades[i] 未定义的...但仅限于本地?

其他环境信息

本地版本通过以下方式拉入:

Game.js

import Game from '../components/Game.html';

const GameComponent = new Game({
  target: document.querySelector('main'),
});

export default GameComponent;

main.js

/* eslint-disable no-unused-vars */

import Game from './js/Game';

index.html

<!doctype html>
<html>
<head>
  <title>CheaterMind</title>
  <link rel="stylesheet" type="text/css" href="colours.css">
</head>
<body>
  <main></main>
  <script src='../dist/main.js' charset='utf-8'></script>
</body>
</html>

设置是 https://github.com/charpeni/svelte-example 的副本,我正在使用 npm run build:watch

使用 yarn upgrade svelte.

本地 更新到 svelte 1.9.1