阅读 884

[译]关于 Parcel 你所需要知道的一切:快速的 Web 应用打包工具

关于 Parcel 你所需要知道的一切:快速的 Web 应用打包工具 🚀

真的吗? 又一个打包/构建工具? 是的 —— 你应该相信, 进步和创新相结合给你带来了 Parcel

Parcel 有什么特别的,我为什么要关心呢?

当 webpack 以高复杂性的代价给我们带来了很多配置的时候 —— Parcel 却很简单。它号称“零配置"。

揭开上面的疑惑 —— Parcel 有一个开箱即用的开发服务器。它会在你更改文件的时候自动重建你的应用程序,并支持 模块热替换 以实现快速开发。

Parcel 有什么优势?

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

Parcel benchmarks

需要考虑到的一点是:Webpack 仍然是极好的,并且有时候能更快

来源

  • Parcel 支持 JS,CSS,HTML,文件资源等 —— 无需插件 —— 对用户更加友好。
  • 无需配置。开箱即用的代码拆分,热模块更新,css预处理,开发服务器,缓存等等!
  • 更友好的错误日志。

Parcel 错误处理

那么 —— 我们应该在什么时候使用 Parcel, Webpack 或者 Rollup 呢?

这完全取决于你,但我个人会在以下情况使用不同的打包工具:

Parcel —— 中小型项目(<1.5万行代码)

Webpack —— 大到企业级规模的项目。

Rollup —— NPM 包。

让我们赶紧试下 Parcel 吧!


安装非常简单

npm install parcel-bundler --save-dev
复制代码

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

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

index.js 链接到 index.html

最后添加 parcel 脚本到 package.json

这就是所有的配置 —— 惊人的节省时间吧!

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

立竿见影!注意构建时间。

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

添加一些 HMR 会怎么样呢?

也感觉非常快。


SCSS

我们所需要的只是 node-sass 包,让我们开始吧!

npm i node-sass && touch styles.scss
复制代码

接下来,添加一些样式并且将 styles.scss 引入到 index.js


生产环境构建

我们所需要做的就是添加一个 build 脚本到 package.json

运行我们的 build 脚本。

看,Parcel 让我们的生活变得多么轻松?

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

parcel build index.js -d build/output
复制代码

React

配置 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 的 index 文件并初始化 Vue。

首先创建一个 vue 目录,并创建 index.jsapp.vue

$ npm i --save vue parcel-plugin-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

准备好了就去做吧!

Github源码


如果你认为这篇文章有用,请给我一些鼓励,并让更多的人看到它!

可以关注我的 twitter 了解更多!

感谢阅读! ❤


掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 AndroidiOS前端后端区块链产品设计人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划官方微博知乎专栏

关注下面的标签,发现更多相似文章
评论