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

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

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

1_-Tcq85crClCEu_gYzn06gg.gif

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

15153265490377.jpg

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

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

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

Parcel 到底哪里好?

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

15153270021235.jpg

Parcel 跑分

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

15153270833519.jpg

图片来源

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

15153272843589.jpg
15153272944862.jpg

Parcel 的错误处理

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

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

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

让我们试一把 Parcel 吧!

安装十分简单

npm install parcel-bundler --save-dev

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

15153275507165.jpg

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

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

15153275910740.jpg
15153275947316.jpg

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

15153276185340.jpg

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

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

15153276691350.jpg
15153276752140.jpg

太棒了!注意构建时间。

15153277488863.jpg

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

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

15153278052986.jpg

感觉上去也很快呢。

SCSS

15153278236404.jpg

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

npm i node-sass && touch styles.scss

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

15153279020786.jpg
15153279085033.jpg
15153279160477.jpg

生产环境构建

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

15153279661277.jpg

跑个构建命令:

1_bPzZxDj7qAwfMFkPBy44Ow.gif

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

15153281690492.jpg

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

parcel build index.js -d build/output

React

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

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

15153282672876.jpg

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

15153284556446.jpg
15153284611633.jpg
15153284675592.jpg

Vue

15153284805159.jpg
按照大家的要求,接下来奉上 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

15153286440392.jpg

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

15153286672197.jpg
15153286723153.jpg
15153286760272.jpg

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

TypeScript

15153287302511.jpg

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

npm i --save typescript

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

GitHub 源代码

植入部分

如果您觉得文章不错,可以通过赞助支持我。

如果您不希望打赏,也可以通过关闭广告屏蔽插件的形式帮助网站运作。

标签: 知识, 使用, 安装

已有 9 条评论

  1. walter

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

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

  2. walter

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

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

  3. 阿良良

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

  4. 开发者头条

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

  5. fimars

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

  6. 感觉这种不需要额外教程

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

添加新评论