简介

官网：https://parceljs.org/

安装

  1. $ yarn add parcel -D

小栗子

先写一个极简ts代码：

  1. const hello: string = 'Hello World!';
  2. console.log(hello);

再在html中引用它

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>Parcel速成小栗子</title>
  6.         <script src="./page.ts"></script>
  7.     </head>
  8.     <body></body>
  9. </html>

来到命令行，执行：

  1. $ yarn parcel src/index.html

此时Parcel会在http://localhost:1234/开启一个Web服务，打开后进入控制台即可看到打印的Hello World!。

可以看到，parcel可以支持直接引入ts文件，其实不止这些，还支持sass、less、vue、react等等，如下图：
image.png

最佳实践

每次输入yarn parcel src/index.html太冗长了，可以在package.json中配置命令脚本：

  1. {
  2.   "scripts": {
  3.     "dev": "parcel ./src/index.html"
  4.   },
  6.   "devDependencies": {
  7.     "parcel": "^2.0.0-alpha.3.2"
  8.   }
  9. }