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

2018-02-09 12:45:25来源:http://www.css88.com/archives/9187作者: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.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


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台