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

继续来一个纯手打翻译node

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

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

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

查看Githubgit

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

  • 🐠 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和改进

很是感谢为此做出贡献的人. 🙏web

Babel编译零配置

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

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

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

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

当你须要额外的配置时, .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

相关文章
相关标签/搜索