parcel初试

391 阅读1分钟

1.优点: 不需要配置,装好即用 测试包括ES6/vue/sass 均可自动编译,浏览器热更新,简单易上手,快速

2.与webpack对比:https://juejin.cn/post/6844903542436839437 (拜读)

3.官网: http://www.css88.com/doc/parcel/

4.git: https://github.com/parcel-bundler/parcel?utm_source=gold_browser_extension

5.插件列表: https://github.com/parcel-bundler/parcel/issues/265

6.安装npm install -g parcel-bundler

7.运行(watch)parcel index.html
Parcel 可以将任何类型的文件作为 入口点,运行后默认启动服务 http://localhost:1234/

8.修改端口命令-p <port number>

9.打包生产环境parcel build index.html

  1) 此方法会重新构建所有文件
  2) 实测发现css、html可以压缩,但js未混淆压缩(待查)
  3)修改打包输出目录 `parcel build entry.js -d */*`

10.demo目录

|-root
   |-dist  // 编译后自动生成
       |-index.html
       |-***.js
       |-***.css
   |-dev   // 开发目录
       |-index.js
       |-index.css
   |-index.html  // 主页面 入口

创建package.json文件: npm init -y

11.已知注意事项

1) sass 使用前需安装模块 `npm install node-sass` 安装新模块后需重新运行
2) js import方式引入css/scss  会以外联的形式打包到html header内
3) 打包后资源未混淆压缩
4) background:url("") 必须带引号 (待验证)
5) 同文件夹下引入路径 需加./

12.已知报错信息

1) `Error: Cannot find module parcel-bundler/src/packagers/JSPackager.js` 不影响正常功能 原因待查
2) 使用sass时  css undefined     可能是未安装sass模块