Parcel 内置了一个开发服务器,当你修改文件时,它将自动重新构建你的应用程序。要启动该开发服务器,请运行 parcel
的命令行工具,并将入口文件作为参数传递给它:
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>
标签将其引入。
当你修改这些文件时,你将看到应用程序将自动更新,甚至无需手动刷新页面!
在本例中,我们展示了如何让 Parcel 处理使用普通的 HTML、CSS 和 JavaScript 文件,但是,Parcel 还可以在无需任何设置的情况下与许多常见的 web 框架及编程语言协同工作,例如 React 和 TypeScript。请查看本文档中的 Recipes 和 Languages 章节以了解更多内容。
So far, we’ve been running the parcel
CLI directly, but it can be useful to create some scripts in your package.json
file to make this easier. We'll also setup a script to build your app for production using the parcel build
command. Finally, you can also declare your entries in a single place using the source
field so you don't need to duplicate them in each parcel
command.
Now you can run yarn build
to build your project for production and yarn start
to start the development server.
By default Parcel does not perform any code transpilation. This means that if you write your code using modern language features, that’s what Parcel will output. You can declare your app’s supported browsers using the browserslist
field. When this field is declared, Parcel will transpile your code accordingly to ensure compatibility with your supported browsers.
You can learn more about targets, as well as Parcel’s automatic support for differential bundling on the Targets page.
现在,你已经设置好项目并准备学习 Parcel 的高级功能了。请查看有关 开发环境 和 生产环境 章节的文档,并查看 Recipes 和 Languages 章节,以便深入了解如何使用流行的 web 框架和工具。