Question

我在昨天阅读文档时对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

我在这里做错了什么？

注意

我也提出了这个问题on Github。

Answer 1

从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创建一个可以在浏览器中运行的包。

Here's your test app running in the REPL。请注意，我们使用<Line>组件的方式是使用components声明它，并将其写入模板，而不是使用oncreate手动实例化。

无法将一个Svelte组件导入另一个

注意

1 个答案: