我对 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 .
最佳答案
从 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 手动实例化它.
关于javascript - 无法将一个 Svelte 组件导入到另一个组件中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45487531/