CodeSky 代码之空

随手记录自己的学习过程

[翻译]关于 Parcel 你所需要知道的一切:时下火爆的快速 Web 应用打包器

2018-01-07 20:47分类: JavaScript评论: 9

这是一次试翻,之后会每两周翻译一篇文章(练习英语阅读)。

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

真的吗?又是一个打包器或者说构建工具?完全正确,进化和创新的结合为你带来了 Parcel

Parcel 有什么特别之处以及为什么我要关心呢?

虽然 Webpack 用复杂性的成本带来了许多的可配置型,相对的,Parcel 带来的是简单性。Parcel 本身把自己称为「零配置」。

上述的详解——Parcel 提供了一个开箱即用的开发服务器。开发服务器将在你更改文件时自动重建你的应用,并支持热更新来实现快速开发。

Parcel 到底哪里好?

  • 快速的打包时间——Parcel 比 Webpack、Rollup 和 Browserify 都要快。

Parcel 跑分

不过有一点需要考虑:Webpack 依旧是极好的,有时候它打包的更快。

图片来源

  • Parcel 对于 JS / CSS/ HTML 和文件资源有有开箱即用的支持——不需要任何插件,更加便于用户使用。
  • 零配置需要。开箱即用的代码拆分,热模块重载,CSS 预处理器,开发服务器,缓存以及更多惊喜!
  • 更友好的错误日志。

Parcel 的错误处理

好了好了我知道了,那么我什么时候用 Parcel / Webpack 或者 Rollup 呢?

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

  • Parcel - 中小型项目(小于 1.5 万行代码)
  • Webpack - 大型以及企业级规模的项目
  • Rollup - 开发 NPM 包时

让我们试一把 Parcel 吧!

安装十分简单

1npm install parcel-bundler --save-dev
2

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

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

开始关联起我们的 index.htmlindex.js

最后把 parcel 命令添加进我们的 package.json

这是所有需要配置的项——节约时间的大神器!

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

太棒了!注意构建时间。

15 毫秒?哇,这实在是太快啦!

那么,HMR(热重载)工作的如何?

感觉上去也很快呢。

SCSS

我们所需要的全部就是一个 node-sass 包,我们很简单就能开工。

1npm i node-sass && touch styles.scss
2

接下来,加上一些样式,在 index.js 中引入 styles.scss

生产环境构建

我们要做的全部就是在我们的 package.json 加上一个 build 命令:

跑个构建命令:

看看 Parcel 如何让我们的生活更轻松?

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

1parcel build index.js -d build/output
2

React

设置 React 非常简单,我们需要做的全部就是安装我们的依赖以及设置我们的 .babelrc

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

好啦好啦,接下来上重酬戏!在滚动到下面的页面之前,尝试着自己写写我们的初始化 React 组件。

Vue

按照大家的要求,接下来奉上 Vue 的例子。

从安装 vueparcel-plugin-vue 开始——后者是为了提供 .vue 的组件支持。

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

我们需要添加我们的根元素,引入 Vue 主页文件和初始化的 Vue 组件。

先从创建一个 Vue 的文件夹开始,同样,创建一个 index.jsapp.vue 吧。

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

现在,关联起我们的 index.jsindex.html

最后,初始化 Vue,写完我们的第一个 Vue 组件。

瞧!我们已经给 Vue 加上了 .vue 的支持。

TypeScript

这真是太简单了。只要安装上 TypeScript 我们就能跑起来。

1npm i --save typescript
2

新建一个叫做 index.ts 的文件并将它添加进 index.html 很棒!

GitHub 源代码

评论 (6)

hahah2018年4月20日 16:47

感觉这种不需要额外教程

敖天羽2018年4月20日 16:50

当时配置 Vue + TS + 其他设置还是有挺多问题的,而且这个基本上不属于教程类,而是属于科普推广型

fimars2018年2月12日 11:39

parcel抽象的那个Assets类也很有意思噢,差不多贯穿了整个工具的设计思路。

开发者头条2018年1月18日 13:29

感谢分享!已推荐到《开发者头条》:https://toutiao.io/posts/c9x0vq 欢迎点赞支持! 欢迎订阅《前端与Node.js》https://toutiao.io/subjects/7076

阿良良2018年1月10日 21:42

在windows平台下发现一个神奇的bug。 用bash on windows运行npm start,成功打包了,也没有报错,但是访问localhost:1234就是访问不了。。。 然后切回powershell就一切正常。

walter2018年1月8日 11:19

我试过不放在同一文件夹下,打包出来乱了

敖天羽2018年1月8日 11:40

你使用的是?我看了一下 Vue / TS / Angular 的 Demo 都是不同目录的

walter2018年1月8日 10:59

如果你的源文件css,js都分别放在一个文件夹下,打包出来的是啥样子,感觉乱了

敖天羽2018年1月8日 11:06

不需要放在同一文件夹下的