

真的? 还有另一个打包器/构建工具? 是的 – 当然,进化和创新结合给你带来了 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.html
和 index.js
文件。
让我们关联我们的 index.html
和 index.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 的例子。
首先安装 vue
和 parcel-plugin-vue
– 后者用于 .vue
组件支持。
$ npm i --save vue parcel-plugin-vue
我们需要添加我们的根元素,导入 vue 索引文件并初始化 Vue 。
首先创建一个 vue 目录,然后创建 index.js
和 app.vue
:
$ mkdir vue && cd vue && touch index.js app.vue
现在让我们关联 index.js
和 index.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
前端打包工具层出不求。