《parcel 踩坑导航》

参考parcel

parcel是什么？

Parcel 包括一个开箱即用的开发服务器，支持热重载、HTTPS、API 代理等。

那什么是开发服务器？

Parcel 的内置开发服务器会在您运行默认命令时自动启动，该parcel命令是parcel serve. 默认情况下，它在http://localhost:1234启动服务器。如果端口1234已在使用中，则将使用备用端口。Parcel 启动后，开发服务器正在侦听的位置将打印到终端。

• -p, --port– 覆盖默认端口。PORT环境变量也可以用来设置端口。
• --host– 默认情况下，开发服务器接受所有接口上的连接。您可以覆盖它以指定仅应接受来自某些主机的连接。
• --open– Parcel 启动后自动在默认浏览器中打开条目。您还可以传递浏览器名称来打开不同的浏览器，例如--open safari.

什么是热重载？

当您更改代码时，Parcel 会自动重建更改的文件并在浏览器中更新您的应用程序。

首先得安装

先安装Node 和 Yarn 或 npm

可以直接安装

yarn add --dev parcel

还能安装指定版本

yarn global add parcel@1.12.3

启动parcel,先初始化package.json，yarn init -y,然后请运行parcel指向您的入口文件的 CLI：

yarn parcel src/index.html

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

然后build项目：

parcel build src/index.html --no-minify --public-url .

简单项目可以用这个，但是有分模块化我用这就很多坑。现在我用这个

先配置package.json

{
  "name": "my-project",
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "latest"
  }
}

现在您可以运行yarn build以构建您的生产项目并yarn start启动开发服务器。 拜拜