新打包工具parcel试用记录

《新打包工具parcel试用记录》

号称零配置的打包工具,使用了之后觉得还不错,于是发一点浅尝辄止的使用经验.

安装

中文官网 https://www.parceljs.cn
v1.5.1

npm install -g parcel-bundler

使用

纯静态服务器

parcel index.html

如果是index.html可以直接parcel效果一样.

现在在浏览器中打开 http://localhost:1234/ 地址。你也可以使用 -p 选项覆盖默认的端口。现在在浏览器中打开 http://localhost:1234/ 地址。你也可以使用 -p <port number> 选项覆盖默认的端口。

资源导入

HTML

三个坑:
在html中的a标签(link似乎也是如此)的href如果有值,会自动加入编译,如果路径有问题就会报错..emmm

img的src必须得有值,为空也会报错..emmm

此为大坑:目前1.5.1版本还未修复,如果是多页面同时编译,css会报一个奇怪的错误完全没有修复的头绪,在git上我也找到了碰到同样问题的小伙伴,目前已经被认定为bug.详情可以参看#issues/651

css

通过npm安装less之后可以无配置自动构建

与webpack并没有太多不同,只是格式特别严谨?

例如导入less文件和css文件,同目录下不能使用”./”
正确方式:

@import "base";
@import "amazeui.css"

如果这样会报错:

@import "./amazeui.css"

使用背景图片URL必须加双引号否则报错,严谨到崩溃.
正确方式:

.test{
background:url("../world.png");
}

postCSS等各种css转译插件都可以用这里不举例.

javascript

  1. babel插件
    可以自行参考官网安装,没什么坑.
    https://www.parceljs.cn/transforms.html
  2. 异步模块
    使用commonjs语法
 // pages/about.js
module.experts = {
//模块方法
say:function(){
console.log("我永远喜欢新垣结衣")
}
}
import('./pages/about').then(function (page) {
  // 渲染页面
  page.say();
});

如此操作,about.js会被另外打包,使用到的时候才会异步载入.
import方法返回的是一个promise对象,可以配合async/await更加优雅,这里不累述.

缺点

1.报错毫无提示,不会告诉你可能是哪里错了,没有解决建议.
2.没有自带proxy
git上给出的方法是用node中间件自己建..emmm
解决方案看这里 #issues/55
参考代码 :

const proxy = require('http-proxy-middleware')
const Bundler = require('parcel-bundler')
const express = require('express')

const bundler = new Bundler('src/index.html')

const app = express()

app.use(
  '/api',
  proxy({
    target: 'http://localhost:3000'
  })
)

app.use(bundler.middleware())

app.listen(Number(process.env.PORT || 1234))

总结

目前还有一些bug,不过方便程度确实提高了不少,可以代替我经常在小项目里的gulp脚本了.
然而本质上还是一个已经帮你配置好的webpack,自定义程度很低,其实这也是类似ios和安卓的博弈,全自动化总是有利有弊的?…不过有cache,编译速度是真的快.
在还不稳定之前,今后在小项目中使用一下还是不错的,求稳的项目还是更偏向于使用各大框架推出的基于webpack的cli工具.

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注