Parcel 中文文档 | Parcel 中文网

编辑：rootadmin

网址：https://parcel.passerma.com/ GitHub：GitHub - passerma/parcel-doc: 🌎 Parcel 中文文档本文档持续翻译中，有想帮忙(希望有人)翻译的小伙伴也可参与哦使用 Parcel 构建 Web 应用程序安装在开始之前，您需要 ...

推荐整理分享Parcel 中文文档 | Parcel 中文网，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

网址：https://parcel.passerma.com/

GitHub：GitHub - passerma/parcel-doc: ? Parcel 中文文档

本文档持续翻译中，有想帮忙(希望有人)翻译的小伙伴也可参与哦

使用 Parcel 构建 Web 应用程序安装

在开始之前，您需要安装 Node 和 Yarn 或 npm，并为您的项目创建一个目录。然后，使用 Yarn 将 Parcel 安装到您的应用程序中：

yarn add --dev parcel

或者在使用 npm 运行时：

npm install --save-dev parcel

项目设置

现在已经安装了 Parcel，让我们为我们的应用程序创建一些源文件。Parcel 接受任何类型的文件作为入口点，但 HTML 文件是一个很好的起点。Parcel 将从那里遵循您的所有依赖项来构建您的应用程序。

src/index.html:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>My First Parcel App</title></head><body><h1>Hello, World!</h1></body></html>

Parcel 中文文档 | Parcel 中文网

Parcel 内置了一个开发服务器，它会在您进行更改时自动重建您的应用程序。要启动它，请运行 parcel 指向您的入口文件的 CLI：

yarn parcel src/index.html

或者在使用 npm 运行时：

npx parcel src/index.html

现在在浏览器中打开http://localhost:1234/以查看您在上面创建的 HTML 文件。

接下来，您可以开始将依赖项添加到您的 HTML 文件，例如 JavaScript 或 CSS 文件。您可以创建一个styles.css，在index.html使用<link>标签引用，或者一个app.js文件使用<script>标签引入。

src/styles.css:

h1 {color: hotpink;font-family: cursive;}

src/app.js:

console.log("Hello world!");

src/index.html:

<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>My First Parcel App</title><link rel="stylesheet" href="https://www.cnblogs.com/passerma/p/styles.css" /><script type="module" src="https://www.cnblogs.com/passerma/p/app.js"></script></head><body><h1>Hello, World!</h1></body></html>

当您进行更改时，您应该会在浏览器中看到您的应用程序自动更新，甚至无需刷新页面！

在这个例子中，我们展示了如何使用普通的 HTML、CSS 和 JavaScript，但 Parcel 也可以与许多常见的 Web 框架和语言一起使用，比如开箱即用的React和TypeScript。查看文档的语言部分以了解更多信息。

打包脚本

到目前为止，我们一直在parcel直接运行 CLI，但在您的package.json文件中创建一些脚本以简化此操作会很有用。我们还将设置一个脚本来使用该命令构建您的应用程序以进行生产环境发布。使用parcel build命令。最后，您还可以使用source在一个地方

本文链接地址:https://www.jiuchutong.com/zhishi/312015.html 转载请保留说明！

上一篇：针对搜索发布可搜多关键词及定栏目搜索(发布相应的搜索公告)

下一篇：phpcms怎么更改后台登录地址(php网站修改)