parcel-v1.6.0更新日志(翻译)

1,593 阅读5分钟

继续来一个纯手打翻译

文章是Parcel的主要开发者devongovett写的, 很值得一看, 于是翻译并发布出来. 原文链接

关联一下以前发布过的将typescript+react的webpack项目迁移到parcel

📦 Parcel v1.6.x: ES6+/JSX零配置, 支持Node/Electron应用, 打包统计分析, 以及各项更新和改进! 🚀

查看Github

Parcel更新很迅速. Parcel v1.6.0是继v1.5.0三周后的一个重大更新, 其中包括超过15项新特性, 大量的bugfix和改进. 较为突出的有:

  • 🐠 ES6+ Babel编译零配置 — 最新版本更容易让你的项目以更少的配置启动: .babelrc现在是可选的! 当你使用babel-preset-env时, Parcel自动编译ES6+ (包括node_modules!), 而且你可以轻松地通过在package.json中指定一个browserslist key覆盖默认浏览器target
  • ⚛️ 默认支持React/Preact的jsx语法 — JSX支持在最新版本是完全自动支持的, 无需额外配置! 如果你正在写React/Preact的程序, 你不在需要一个.babelr文件来启动, Parcel如果检测到你在使用React/Preact, 会为你自动开启JSX语法支持. 👌
  • 🌐 Node/Electron targets — Parcel现在支持打包Node/Electron应用了. 这些环境的原生特性比如fs的内联使用是不被允许的, 而且node_modules也不会被打包.
  • 📊 生产环境打包分析 — 现在当你打包生产环境代码时, Parcel能记录每个bundle的大小和编译时间. 作为一个可选项, 您可以查看更详细的报告, 列出每个包中最大的文件, 以帮助您优化.
  • 6️⃣ Node 6支持 — Parcel现在可以在Node 6版本上跑了. 如果你还是用Node 6以下的版本, Parcel是运行不了的.
  • 3C WebManifest支持 — 对PWA应用来说这是很重要的, Parcel可以解释你的HTML中的.webmanifest文件, 处理比如homescreen icons这样的依赖, 还有service workers
  • 一些bugfix和改进

非常感谢为此作出贡献的人. 🙏

Babel编译零配置

Babel在Parcel中一直是开箱即用的, 用以编译现代JavaScript为浏览器可用的代码. 但是, 在此之前, 你仍然需要写一个.babelrc配置文件以及安装一些必要的presets/plugins.

现在不再需要了! Parcel现在默认使用babel-preset-env, 支持零配置地按照你指定的浏览器/node环境去编译现代JavaScript: .babelrc不再是必需的了. 👌

默认情况下, Parcel为具有> 1%市场份额的引擎编译浏览器代码, Node环境的话是编译到当前LTS版本(现在是6.0.0), 但是你可以在package.json中指定一个browserslist值来覆盖.

Parcel同样支持编译node_modules中的ES6+代码! 如果一个模块的指定target高于程序的版本, 这个模块编译时的target会被降至程序的targets. 这意味使用ES6+写的模块可以发布到npm仓库, 同时你的程序仍然可以不用任何配置就使用这些模块. 模块仅仅会在必要时候被编译: 如果ES6 classes在程序中被支持, node_modules中的classes不会被编译

当你需要额外的配置时, .babelrc文件仍然是可以被检测到的. 然而,这不再适用于node_modules,只有应用程序中的代码才适用,因为之前的做法造成了太多的问题.

默认的React/Preact JSX语法支持

继续这个主题, Parcel v1.6.x同样支持了JSX的开箱即用. Parcel会自动检测你是否安装了React/Preact依赖, 开启JSX语法支持, 并且选择你正在使用的库的正确的JSX编译指示. 默认是React, 可是Preact也是支持的, 如果你愿意去社区贡献的话, 要加上其他库也是很容易的.😍

这两个特性 — babel-preset-env零配置, 默认支持JSX语法 — 组合起来提供了一个React程序的完整的零配置起点. 不需要更多的配置Babel就可以启动程序! 如果你需要开启一些额外的特性, 你还是可以后续加一个.babelrc. 👏

感谢Sheel Patel为Parcel新增了这个特性! 🏆

Node/Electron Targets

Parcel开始时是为web程序提供一个快速, 零配置的开发体验. 但是今天, JavaScript的使用已经超出了web浏览器, 它可以被使用在服务器, 桌面, 移动apps...

Parcel v1.6.0 现在为Node/Electron提供了targets, 为其对应的环境友好地输出代码. 由于这些环境都有它们自有的模块系统, 并且提供一些比如filesystem的原生方法, 当你指定targets为Node/Electron时Parcel禁用了若干为浏览器铺垫的特性.

不是就近的依赖(比如 import express from 'express') 会被指定为从node_modules获取并按原样保留, 不打包. 就近依赖的(比如import car from './car') 则照常打包.

fs.readFileSync不打包

Buffer, __dirname这些全局变量不打包

Hot Module Loading runtime不打包(for --target=node)

如果是默认设置--target=browser, 你的浏览器app照常不变

感谢Guilherme Bernal为Parcel新增了这个特性! 👏

生产环境打包分析

当为生产环境打包时, Parcel现在可以记录分析关于包的大小和构建时间. 搭配--detailed-report使用, Parcel同时会提供每个包中按文件大小分列的顶层资源的细目. 当有一个非常大的包时, 它甚至会警告你应该去看看. ⚠️

我希望将来进一步扩展并完善这个功能, 以便更深入地了解你的代码.

感谢Jasper DeMoor为这个特性持续努力! 🏅

来试试吧!

Parcel还有很长的路要走,我们才刚刚开始。我等不及要看你用它来做些什么了!

如果你发现任何bug, 可以在Github上面向我们报告. 也可以在Twitter上@devongovett