Parcel Web 应用打包工具

Parcel 是 Web 应用打包工具,适用于经验不同的开发者。它利用多核处理提供了极快的速度,并且不需要任何配置。

快速开始

首先通过 npm 安装 Parcel :

:npm install -g parcel-bundler
npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
/usr/local/bin/parcel -> /usr/local/lib/node_modules/parcel-bundler/bin/cli.js

> [email protected] install /usr/local/lib/node_modules/parcel-bundler/node_modules/fsevents
> node-gyp rebuild

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> [email protected] install /usr/local/lib/node_modules/parcel-bundler/node_modules/deasync
> node ./build.js

`darwin-x64-node-13` exists; testing
Binary is fine; exiting

> [email protected] postinstall /usr/local/lib/node_modules/parcel-bundler/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> [email protected] postinstall /usr/local/lib/node_modules/parcel-bundler
> node -e "console.log('\u001b[35m\u001b[1mLove Parcel? You can now donate to our open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/parcel/donate\u001b[0m')"

Love Parcel? You can now donate to our open collective:
 > https://opencollective.com/parcel/donate
+ [email protected]
added 811 packages from 478 contributors in 92.593s

在你正在使用的项目目录下创建一个 package.json 文件:

:npm init -y
Wrote to /Users/lurongming/test/test_parcel/package.json:

{
  "name": "test_parcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
:

Parcel 可以使用任何类型的文件作为入口,但是最好还是使用 HTML 或 JavaScript 文件。如果在 HTML 中使用相对路径引入主要的 JavaScript 文件,Parcel 也将会对它进行处理将其替换为相对于输出文件的 URL 地址。

接下来,创建一个 index.html 和 index.js 文件。

<html>
  <body>
    <script src="./index.js"></script>
  </body>
</html>
console.log('hello world')

Parcel 内置了一个当你改变文件时能够自动重新构建应用的开发服务器,而且为了实现快速开发,该开发服务器支持热模块替换。只需要在入口文件指出:

:parcel index.html
Server running at http://localhost:1234 
✨  Built in 1.43s.

现在在浏览器中打开 http://localhost:1234/。
在这里插入图片描述

如果模块热重载没有生效,你可能需要配置你的编辑器。你也可以使用 -p 选项覆盖默认的端口。 如果没有自己的服务器可使用开发服务器,或者你的应用程序完全由客户端呈现。如果有自己的服务器,你可以在watch 模式下运行 Parcel 。当文件改变它仍然会自动重新构建并支持热替换,但是不会启动 web 服务。

parcel watch index.html

你也能使用createapp.dev在浏览器中创建一个 Parcel 项目。选择你需要的特性列如 React, Vue,Typescript 和 CSS,然后你将会看到项目实时生成。你能通过这个工具去学习如何怎么建立一个新的项目并且你也能下载这个项目作为一个 zip 文件然后立即开始写代码。

多个文件入口

假设你有超过一个的入口文件,比如是index.html and about.html,你有两种方式来打包:

指定当前文件的名字:

parcel index.html about.html

使用 tokens 并创建一个 glob:

parcel ./**/*.html

注意: 假设你的文件目录结构如下:

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

打开 http://localhost:1234/folder-1/ 是不行的,反而你需要显式地指向文件 http://localhost:1234/folder-1/index.html。

生产模式构建

当你准备在生产模式下创建,build 模式会关闭监听并且只建立一次。请查阅 Production 查看更多细节。

有时全局安装 Parcel 是不可能的。举个例子,假如你正在构建其他人的 build agent 或者你想使用 CI 以编程的方式构建你的项目。如果这样,你可以将 Parcel 作为本地包安装并运行。

npm install parcel-bundler --save-dev

接着,通过修改你的package.json来添加这些任务脚本

{
  "scripts": {
    "dev": "parcel <your entry file>",
    "build": "parcel build <your entry file>"
  }
}

然后,你就能运行它了:

# 以开发模式运行
npm run dev

# 以生成模式运行
npm run build
发布了181 篇原创文章 · 获赞 14 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/LU_ZHAO/article/details/105003108