parcel比webpack简单简洁太多了，0配置，构建干净，没有乱七八糟的warning； 所有的缺少的模块都是自动安装的，不用像webpack一样停下安装再运行测试再停下安装再运行测试…

快速开始
https://parceljs.org/getting_started.html#%E6%B7%BB%E5%8A%A0-parcel-%E5%88%B0%E4%BD%A0%E7%9A%84%E9%A1%B9%E7%9B%AE

安装模块

  1. // 全局安装parcel-bundler
  2. tyarn global add parcel-bundler
  4. // 初始化package.json
  5. npm init -y
  7. // 添加parcel到项目
  8. yarn add parcel-bundler --dev

目录

image.png

初始化package.json

  1. {
  2.   "name": "parcel-taste",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "dev": "parcel src/index.html",        // 入口
  8.     "build": "parcel src/index.html",    
  9.     "test": "echo \"Error: no test specified\" && exit 1"
  10.   },
  11.   "keywords": [],
  12.   "author": "",
  13.   "license": "ISC",
  14.   "devDependencies": {
  15.     "parcel-bundler": "^1.12.4"
  16.   }
  17. }

yarn dev

运行
image.png

默认给配置了热加载，并且修改了文件不会出现一堆warning，比webpack好用多了

配置其他插件

TypeScript

https://parceljs.org/typeScript.html
转换 TypeScript 是开箱即用的不需要额外的配置
可以直接引入script标签引入ts

  1. <script src="./greeter.ts"></script>

vue

新建测试相关的文件vue、index.js，进行一点vue的配置

image.png
所有的缺少的模块都是自动安装的，不用像webpack一样停下安装再运行测试再停下安装再运行测试

image.png

scss

https://parceljs.org/scss.html
直接用，0配置。

react

代码仓库位置

https://github.com/withwz/parcel-bundler-taste