1

当我昨天浏览文档时，我对Svelte真的很感兴趣，但我正在努力建立一个非常基本的项目，而且我似乎无法弄清楚我做错了什么。

我从以下 HTML 开始：

<!doctype html>
<html>
<head>
  <title>My first Svelte app</title>
</head>
<body>
  <main></main>
  <script src='App.js'></script>
  <script>
    const application = new App({
      target: document.querySelector( 'main' ),
      data: {
        name: 'world'
      }
    });
  </script>
</body>
</html>

然后，我创建以下App.html组件：

<div class="app">Hello {{name}}</div>
<div class="lines"></div>
<script>
  export default {}
</script>

我跑了svelte compile --format iife App.html > App.js，一切正常。

到目前为止，一切都很好！

现在，我创建了一个Line.html包含以下内容的组件：

<div class="line">{{value}}</div>
<script>
  export default {}
</script>

我像这样修改我的App.html组件：

<div class="app">Hello {{name}}</div>
<div class="lines"></div>
<script>
  import Line from './Line.html';

  export default {
    oncreate() {
      const line = new Line({
        target: document.querySelector( 'lines' ),
        data: {
          value: 'test'
        }
      });
    }
  }
</script>

我希望这段代码能够将类似的东西添加<div class="line">test</div>到 DOM 作为<div class="lines"></div>.

但是，当我编译此代码时收到以下警告：

No name was supplied for imported module './Line.html'. 
Guessing 'Line', but you should use options.globals

当我尝试运行编译后的代码时，我只会在控制台中得到以下输出：

App.js:250 Uncaught ReferenceError: Line is not defined          at App.js:250
index.html:10 Uncaught TypeError: App is not a constructor       at index.html:10

我在这里做错了什么？

笔记

我也在Github 上提出了这个问题。

4

1 回答 1

3

从 GitHub 复制答案：

svelte-cli适用于单个文件 - 您需要Line.html单独编译，并将其包含在页面中，如下所示：

<!doctype html>
<html>
<head>
  <title>My first Svelte app</title>
</head>
<body>
  <main></main>
  <script src='Line.js'></script> <!-- one for each component! -->
  <script src='App.js'></script>
  <script>
    const application = new App({
      target: document.querySelector( 'main' ),
      data: {
        name: 'world'
      }
    });
  </script>
</body>
</html>

它会猜测这Line.js是定义一个名为 的全局变量Line，这就是App.js能够引用它的方式 - 但它更希望您通过使用该--globals选项来明确这一点。

不用说，这是一个巨大的痛苦——它根本不会超过某个点。因此，我们建议您使用集成了 Svelte 的构建工具。这样一来，您就不必担心要处理所有不同的导入文件，而且 Svelte 能够生成更紧凑的代码（因为它可以在组件之间对一些辅助函数进行重复数据删除）。

最简单的开始方法——我一直想写一篇关于这个的非常简短的博客文章——是单击 REPL 中的“下载”按钮。这将为您提供一个基本的项目设置，您可以使用npm run dev和运行npm start。在底层，它使用Rollup创建一个可以在浏览器中运行的包。

这是您在 REPL 中运行的测试应用程序。请注意，我们使用<Line>组件的方式是使用 声明它components，然后将其写入模板，而不是手动实例化它oncreate。

于 2017-08-03T14:54:29.930 回答