【工程化】从零使用parcel打包

172 阅读1分钟

实践出真知,以最快、最简洁的方法先跑起来

一、安装

npm install parcel -g  

二、打包执行

文件目录如下:

.
`-- src
    |-- hello.html
    `-- index.js

各文件详情(最简易版): ./src/hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello parcel</title>
</head>
<body>
    <h1>hello parcel</h1>
</body>
<script src="../src/index.js"></script>
</html>

./src/index.js

console.log('hello parcel');

==说几个注意点==:

  1. parcel无须任何配置文件
  2. parcel内置了开发服务器,打包完成会立刻在本地1234端口上运行

万事俱备,执行打包命令

npx parcel .\src\hello.html

检验

浏览器访问该html文件,会有以下显示 Pasted image 20230730222046.png

三、结语

本节学习了parcel的安装与打包的命令,parcel的内置开发服务器与无须配置的打包流程惊艳到了我。 不过对我来说,有无法接受的几点:

  1. 文件极简,打包速度却慢。
  2. 打包出来的文件有些让我吃惊
  3. ctrl c强制结束的时候有等待时间(这点很难受)

与君共勉。