人生苦短,我用parcel构建前端

作者: 张阳君 分类: 前端技术

提到现代前端技术,一定离不开webpack。从本质上讲,前端构建工具是因为浏览器跟不上前端发展而诞生的。理想的前端开发流程是不需要任何构建工具介入的,写完丢给浏览器就能直接运行,而webpack则是用来弥补代码对浏览器兼容性的。webpack的好处是插件多、配置多、功能强大,而他的缺点也是配置过于复杂,插件质量参差不齐,尽管 webpack 4可以零配置启动,但要在老项目中升级又是各种踩坑。而parcel是一个后起之秀,和rollup一样,他几乎可以零配置构建前端。所以今天就来聊聊parcel。

parcel官网所宣扬的零配置是一个噱头,他真正的优势在于一切从简,这意味着你还是得做一些简单的配置工作。parcel默认就能加载各种后缀格式,编译、热重载、代码拆分一条龙帮你搞定,你不用去管sass-loader配置在什么地方。这两天我小用了一下parcel,感觉蛮爽的,他能让你的焦点集中在代码上,而不是配置构建上。

这里给大家分享一下parcel的开发经验:

在项目中安装parcel

npm install -D parcel-bundler

注意:上面是局部安装,你需要把parcel的代码放进npm script才能启动项目。

三个配置文件

号称零配置的parcel也需要配置三个常用文件,package.json、.babelrc和.postcssrc。

package.json就不多说了,现代前端开发必备文件,一般会把项目的启动脚本放进npm script中,启动代码特别简单,入口文件可以是html,也可以是js或css:

"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html  --public-url ./"
}

.babelrc是用来编译es6+脚本的,如果你写的是es5或者typescript的话,那这个文件可有可无。文件配置很简单,一般用默认的env配置就行:

{
    "presets": ["env"]
}

.postcssrc是postcss的配置文件,如果你要用到postcss的插件,这个文件是必须的。譬如我们可以开启cssModule并且使用autoprefixer来添加属性前缀:

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

简单上手

用parcel最舒服的地方在于,我可以直接在html中引入scss、ts等类型的文件,非常直观!

<html>
<body>
  <script src="./index.ts"></script>
  <link href="./style.scss" />
</body>
</html>

注意:parcel可以零配置编译typescript

看到这里有没有心动了呢?以后想写一个简单的html demo,但是又想使用ts或者es6+语法的时候,不用再慌慌张张地去配置webpack了,parcel瞬间搞定!其实parcel还支持模块热替换和代码拆分,可以处理更加庞杂的代码结构。我这两天用parcel+jsx+vue2.0仿了暴雪的战网首页,欢迎大家start和fork。github地址:https://github.com/supervergil/vue-blizzard

简单不意味着low,人生苦短,我用parcel构建前端。

(全文完)

0 条评论
回复
支持 Markdown 语法
暂无评论,来抢个沙发吧!