Javascript 无法将一个苗条组件导入另一个_Javascript_Node.js_Ecmascript 6_Components_Svelte

Javascript 无法将一个苗条组件导入另一个

javascript node.js ecmascript-6

Javascript 无法将一个苗条组件导入另一个,javascript,node.js,ecmascript-6,components,svelte,Javascript,Node.js,Ecmascript 6,Components,Svelte,当我昨天浏览文档的时候，我真的很感兴趣，但是我正在努力建立一个非常基本的项目，我似乎不知道我做错了什么我从以下HTML开始： <!doctype html> <html> <head> <title>My first Svelte app</title> </head> <body> <main></main> <script src='App.js'></

当我昨天浏览文档的时候，我真的很感兴趣，但是我正在努力建立一个非常基本的项目，我似乎不知道我做错了什么

我从以下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>

我运行

svelte compile--format iife App.html>App.js

，一切正常

到目前为止，一切都很好

现在，我创建了一个具有以下内容的

Line.html

组件：

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

我希望这段代码将像

test

这样的东西作为

的子级添加到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

我做错了什么

注

我也提出了这个问题。

从GitHub复制答案：

svelte cli

适用于单个文件-您需要单独编译

Line.html

，并将其包含在页面上，如下所示：


我的第一个苗条应用程序
const应用程序=新应用程序({
目标：document.querySelector（'main'），
数据：{
名称：“世界”
}
});

它会猜测

Line.js

正在定义一个名为

Line

的全局变量，这就是

App.js

能够引用它的方式-但它更希望您通过使用

--globals

选项来明确这一点

不用说，这是一个巨大的痛苦-它不会在超过某一点的时候扩展。因此，我们建议您使用集成了Svelte的构建工具。这样，您就不必担心如何处理所有不同的导入文件，而且作为额外的奖励，Svelte能够生成更紧凑的代码（因为它可以消除组件之间的一些辅助函数的重复）

最简单的开始方法是点击REPL中的“下载”按钮，我一直想写一篇关于这个的很短的博客文章。这将为您提供一个基本的项目设置，您可以使用

npm run dev

和

npm start

运行该设置。在引擎盖下，它用来创建可以在浏览器中运行的捆绑包

。请注意，我们使用

组件的方法是使用

组件声明它，并将其写入模板，而不是使用oncreate
手动实例化它
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