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

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> 作为 <div class="lines"></div> 的子项添加到 DOM。

但是，我在编译这段代码时收到以下警告：

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 能够生成更紧凑的代码（因为它可以删除组件之间的一些辅助函数）。

最简单的入门方法——我一直想写一篇关于此的非常简短的博客 post——是单击 REPL 中的 'download' 按钮。这将为您提供一个基本的项目设置，您可以获得运行 npm run dev 和 npm start。在引擎盖下，它使用 Rollup 创建一个可以在浏览器中运行的包。

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

手动实例化它

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

Unable to import one Svelte component into another

javascript

components

node.js

ecmascript-6

svelte

备注