使用 Parcel 的基本 Svelte 应用
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
启动 Svelte 应用的最简单方法是使用create-svelte-app( https://github.com/ph1p/create-svelte-app )，它使用webpack。
但是，自己动手搭建应用可以带来更大的自由度和更丰富的知识……因此，以下是使用 Parcel.js 打包器从头开始搭建自己的 Svelte 应用的分步指南。
开球
在终端中，导航到存放开发项目的位置，然后运行以下命令创建一个你选择名称的目录mkdir myFirstSvelteApp。
然后，cd进入新创建的目录，并git使用以下命令初始化仓库git init。
现在，运行程序yarn init快速设置项目详细信息package.json。这将显示一些问题，您可以接受默认值（留空并按回车键Enter），也可以输入更合适的内容。
基本工作完成后，我们现在需要安装几个软件包：
parcel-bundlerParcel.jssvelte苗条parcel-plugin-svelte（https://github.com/DeMoorJasper/parcel-plugin-svelte）
我们只需一条命令即可轻松安装所有组件：yarn add -D parcel-bundler parcel-plugin-svelte svelte
由于我们使用了该
-D标志，这些将安装为devDependencies。
现在打开package.json文件，您不仅会看到您之后回答的问题内容yarn init，还会看到devDependencies上面列出的条目。另外请注意，yarn add我们不仅添加了依赖项package.json，还安装了它们，因此您现在拥有一个node_modules包含所有必需软件包的文件夹。
作为一项额外的练习，如果您需要更好地了解依赖项是如何“工作的”，请删除该
node_modules文件夹rm -rf ./node_modules/，然后运行该命令yarn install，它将重新创建该文件夹并从头开始下载/安装所有软件包。
在进行第一次commit保存操作之前，我们需要告诉程序git忽略该node_modules文件夹和其他一些默认文件。您可能已经通过全局设置忽略了这些文件，gitignore但最好将其设置在项目根目录。
因此，以下提供了一种快速创建.gitignore文件来指示程序git忽略node_modules这些敏感文件的方法：
echo "node_modules" >> ./.gitignore
echo "dist" >> ./.gitignore
echo ".cache" >> ./.gitignore
echo ".env" >> ./.gitignore
以上每行命令都会将双引号内的内容添加到 .gitignore 文件中。您也可以在 VS Code 或类似的编辑器中手动编辑该文件。此文件可以添加注释
#。
强烈建议您创建一个README.md文件来详细介绍这个项目，但本文暂不赘述。
我认为现在是进行首次提交的好时机。
一些问候
到目前为止，我们还缺少一些东西。
让我们开始吧……我们需要创建基本的应用程序文件，这些文件将：./src/index.html 作为 Parcel 的起点、./src/index.js 启动脚本./src/components/App.svelte 、根组件./src/css/styles.scss 和全局通用样式。
注意子文件夹
src，，src/components。src/css
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width" />
<title>Svelte with Parcel</title>
<link rel="stylesheet" href="./css/styles.scss">
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
Parcel.js 会读取这个文件并编译它“导入”的所有内容。
这个文件只是纯 HTML。
index.js
import App from './components/App.svelte';
const app = new App({
target: document.body,
props: {
name: 'Svelte',
},
});
export default app;
Parcel.js 会解析此文件，因为它在index.html.
App.svelte
<script>
export let name;
</script>
<style>
h1 {
text-align: center;
}
</style>
<h1>Hello {name}!</h1>
这是我们的根组件。现在我们先把它做得非常基础。
styles.scss
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
color: #212223;
display: flex;
flex-direction: column;
justify-content: center;
}
就是常规操作scss。导入局部模板，声明变量等等……
快到了！！
为了方便地以dev生产模式运行 parcel 打包器或构建生产环境，我们将scripts在文件中添加一个部分package.json：
"browserslist": [
"last 1 chrome versions"
],
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html"
}
将上述内容添加到
package.json根目录下的任何位置即可{}。添加
此条browserslist目是为了防止编译错误。更多信息
全部完成！
在根目录下运行，yarn dev然后打开。http:localhost:1234
你应该会看到：
现在前往Svelte 教程，并在你新创建的应用上进行尝试。
干杯!
PS：写这篇文章比我想象的要花更多时间，也比整个过程本身花费的时间长得多。呼……
文章来源：https://dev.to/alexparra/basic-svelte-app-with-parcel-30i5