12月13, 2017

parceljs简单入门

现在构建工具真的挺多,从grunt到gulp,再从FIS到webpack,到rollup,再到现在的parcel。

因为这阵子在做一些比较枯燥的事(重写antd的css,这个我到时候会另开文章说明),所以也没有太多精力去学习和实践。

早上得闲,就去试用了一下。总体感觉下来,比较适合简单的项目。

parceljs文档,看不懂英文的,可以看看码爷翻译的:parceljs

其实我个人还是比较推荐英文的(对比了一下中文,发现有些中文文档有缺省),而且文档也不长,基本是用代码说话。

初体验

拿之前的活动页面来说,涉及的可能也就模板渲染、FORM表单这些内容,所以当时为了方便,就直接多页,然后+Vue。

如果想更进一步,比如说代码压缩、公共文件抽取这些,在不改变代码结构的情况下,只能依靠FIS来构建了。

然而FIS在Npm这一块上面,并不是太友好,即还要走一些配置(这些配置可能会让人心累)。

有了parceljs,我觉得让前端可以以最最方便的形式来书写ES6代码。譬如实现一个vue的简单功能:

<!-- index.html -->
<p id="test">{{msg}}</p>
<script src="./index.js"></script>
import Vue from "vue";

new Vue({
    el: "#test",
    data: {
        msg: "hello world"
    }
})

然后在控制台执行:

parcel index.html

当然上面的代码在执行时,会报以下错误:

[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

这个只要配置一下alias即可。

但其实parceljs是不支持alias的,它的解决方式是通过babel:

"plugins": [
      ["module-resolver", {
        "alias": {
          "vue": "vue/dist/vue.js"
        }
      }]
 ]

吐嘈一下,发现没装这个npm插件,编译也不会报错。后来安装上,尝试了很多次才成功。。

打包

parcel build index.html

打包index.html,它会去找index.html依赖的css js,将其他out到dist文件,默认是以压缩的形式。

如果打包index.js,它会找自己的依赖,然后最终输出的文件夹中不会有index.html。

但不知道为何,js文件前几行没有压缩:

alt

文档中提及的,将文件md5,这一块我未能尝试成功。

总结

目前我测试的结果,像文件md5,img按照体积(小的话生成base64)、修改publishPath,这些有的有(但我并没有走通,可能是我姿势不对),有的还没有。

官网给的亮点是有两个:

  • 零配置
  • 编译快

零配置带来的结果可能就是复杂项目搞不来,或者得用一些奇淫技巧来解决,至于编译快,我觉得用webpack,喝杯咖啡(水)的时候都编译不好吗?

所以可以继续观望,也可以用在一些简单的活动页面中。不过对于大型项目来说,webpack相对而言,更加好一些吧。

本文链接:www.my-fe.pub/post/parceljs-simple-get-started.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。