文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

开始使用

发布于 2019-05-26 15:36:14 字数 2524 浏览 1082 评论 0 收藏 0

Parcel 是款网页打包工具，凭藉其开发者体验脱颖而出。它利用多核处理来达成极速编译，且完全无须设定。

首先使用 Yarn 或 npm 安装 Parcel：

Yarn:

yarn global add parcel-bundler

npm:

npm install -g parcel-bundler

在你的专案中建立 package.json 档案：

yarn init -y

或

npm init -y

Parcel 可将任何类型的档案视为进入点，但 HTML 或 JavaScript 会是较好的选择。如果你在 HTML 中使用相对路径引入主要的 JavaScript 档案，Parcel 将会在输出的档案中自动替换这些路径。

下一步，建立 index.html 及 index.js。

<html>
<body>
  <script src="./index.js"></script>
</body>
</html>

console.log('hello world')

Parcel 内建了开发专用的伺服器，在你更动档案的同时会自动重新编译你的 app，并启用模组热替换以提高开发效率，你只需要指定进入点：

parcel index.html

接着在浏览器中打开 http://localhost:1234/。若模组热替换无法正常运作，你可能需要设定你的编辑器。你也可以使用 -p <port number> 选项来複写预设连接埠。

开发专用的伺服器建议只在没有自有伺服器及纯前端 app 的情况下才使用。若你已有伺服器，可使用 Parcel 的 watch 模式，此模式仍有自动重新编译及模组热替换的功能，但不会启动网页伺服器。

parcel watch index.html

你也可以利用 createapp.dev 来建立 Parcel 专案，网页会在你选择功能（React、Vue、Typescript 和 CSS 等等）的同时产生专案。透过这个工具你可以学习如何建立新专案，也可以将建立好的专案下载为 ZIP 档。

若你有多个进入点，假设分别是 index.html 及 about.html，你有两种方式可以启动打包工具：

指定档案名称：

parcel index.html about.html

或使用 token 并建立一个 glob：

parcel *.html

注意：若你有类似这样的档案架构：

- folder-1
-- index.html
- folder-2
-- index.html

在这种情况下是无法连线到 http://localhost:1234/folder-1/ 的，你需要明确的指定至档案才行，如： http://localhost:1234/folder-1/index.html。

当你準备部署至正式环境时，build 模式会关闭档案监视且仅会编译一次，详情请见正式环境一章。

将 Parcel 加入至你的专案

在某些情境下你可能无法使用全域的 Parcel，例如你在他人的机器上编译时或者你想使用 CI 来自动化你的编译，这时你就可以将 Parcel 安装为本地的套件。

使用 yarn 安装：

yarn add parcel-bundler --dev

使用 NPM 安装：

npm install parcel-bundler --save-dev

接着将下列脚本加入你的 package.json 中：

{
  "scripts": {
    "dev": "parcel <你的进入点>",
    "build": "parcel build <你的进入点>"
  }
}

最后，你将可以用下列指令执行：

# 执行开发模式
yarn dev
# 或
npm run dev

# 执行正式模式
yarn build
# 或
npm run build

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据