您的位置:首页 » 分类: JavaScript & 前端工具 » 文章: 关于 Parcel 你所需知道的一切:超快的Web应用打包器

关于 Parcel 你所需知道的一切:超快的Web应用打包器

小编推荐:掘金是一个面向程序员的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。

真的? 还有另一个打包器/构建工具? 是的 – 当然,进化和创新结合给你带来了 Parcel。

Parcel 有什么特别之处,我为什么要关注呢?

虽然 webpack 带来了许多可配置性,同事也造就了它的复杂性。 而 Parcel 带来简单性。 官方号称 Parcel 为 “零配置” ,开箱即用。

正如上面所说的 – Parcel 内置了一个开箱即用的开发服务器。 开发服务器将在你更改文件时自动重新构建你的应用程序,并支持 模块热替换 以实现快速开发。

Parcel 有什么好处?

  • 快速打包 – Parcel 比 Webpack,Rollup 和 Browserify 更快。

    Parcel 的基准测试

    需要注意的是:Webpack仍然很棒,有时可能会更快

    查看来源

  • Parcel 支持 JS、CSS、HTML、资源文件等等 – 无需插件 – 更加便于用户使用。

  • 零配置。开箱即用的代码拆分,模块热替换,CSS 预处理器,开发服务器,缓存等等;
  • 更加友好的错误日志。


    Parcel 的错误处理

你说的都对 – 我应该什么时候使用 Parcel , Webpack 或 Rollup 呢?

这完全取决于你,但我个人会在以下情况下使用每个打包器:

  • Parcel:中小型项目(代码行小于 15k)
  • Webpack:大型以及企业级项目。
  • Rollup:用于 NPM 包。

让我们给 Parcel 一个机会 。

安装非常简单

npm install parcel-bundler --save-dev

我们在本地安装了parcel-bundler npm 包。 现在我们需要初始化一个 node 项目。

接下来,创建 index.htmlindex.js 文件。

让我们关联我们的 index.htmlindex.js:

最后将 parcel 脚本添加到我们的 package.json 中:

这就是所有配置 – 超乎想象地节省时间!

接下来,让我们启动我们的服务器。

像使用了魔法一样的工作!注意构建时间。

15ms ?! 哇,真是太快了!

如何 HMR (模块热替换)?

也感觉非常快。

SCSS

我们需要的是node-sass 包,剩下的工作就非常简单了!

npm i node-sass && touch styles.scss

接下来,添加一些样式,并将 styles.scss 导入到 index.js 中:

生产环境构建

我们需要做的只是添加一个构建脚本到我们的 package.json 中。

运行我们的构建脚本。

看看 Parcel 如何让我们的工作变得轻松?

你也可以像这样指定一个特定的构建路径:

parcel build index.js -d build/output

React

设置 React 环境非常简单,我们需要做的就是安装我们的依赖项并设置我们的 .babelrc

npm install --save react react-dom babel-preset-env babel-preset-react && touch .babelrc

一切准备就绪,接下来见识一下它的威力!在阅读下面内容之前,请尝试自己编写我们的初始 react 组件!

Vue

按照要求,这里是 Vue 的例子。

首先安装 vueparcel-plugin-vue – 后者用于 .vue 组件支持。

$ npm i --save vue parcel-plugin-vue

我们需要添加我们的根元素,导入 vue 索引文件并初始化 Vue 。

首先创建一个 vue 目录,然后创建 index.jsapp.vue :

$ mkdir vue && cd vue && touch index.js app.vue

现在让我们关联 index.jsindex.html

最后,让我们初始化vue并编写我们的第一个vue组件!

瞧!我们安装了 Vue,并且还能支持 .vue

TypeScript

这个就更加容易了。 只需安装 TypeScript 就可以了,我们马上开始!

npm i --save typescript

创建一个名为 index.ts 的文件并将其插入到 index.html 中:

转译

Parcel 还内置支持很多转译工具,如 Babel,PostCSS,PostHTML。具体内容可以查看官方文档

一切就是这么简单。

Github 源码

文章中用到的例子源码可以从这里下载:https://github.com/wesharehoodies/parcel-examples-vue-react-ts

原文链接:https://medium.freecodecamp.org/all-you-need-to-know-about-parcel-dbe151b70082

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

1 条评论 - 关于 “关于 Parcel 你所需知道的一切:超快的Web应用打包器

发表评论

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