Parcel v1.10.0发布,默认支持 Babel 7、Flow、Elm等

简介: 我们一起来看看有哪些新的变化

原文作者:devongovett

译者:UC 国际研发 Jothy


我们一起来看看有哪些新的变化:

支持 Babel 7 - Parcel 现在支持开箱即用的 Babel 7 插件,同时也支持 Babel 6。 此外,我们现在会为您自动安装正确版本的 Babel,以及您开发时缺少的任何插件!

自动支持 Flow - Parcel 会自动检测 Flow 类型并在构建时从 JS 中剥离它们,就像我们已经为 TypeScript 做的那样。 无需配置 Babel - 它就能生效!

支持 Elm - 现在支持 Elm 开箱即用! 如果需要,我们会自动为您安装 Elm 工具链,并为您初始化 Elm 项目。 生产版本默认包含完整的优化支持。

支持内联脚本和样式 - Parcel 会检测内联样式属性,以及HTML 中的

HTML 包加载器 - 您现在可以使用 import('./ some.html')语法,在运行时异步加载外部 HTML 文件到你的 JavaScript 中。

支持 JSON LD - Parcel 现在可以检测出 HTML 中引入的 JSON LD 文档类型 assets,并将它们包含在构建中。

加载现有的 source maps - Parcel 现在可以从被导入的预编译 JavaScript 文件中加载被引用的现有 source maps,因此您可以使用真正的原始源进行调试。

非常感谢为此次发布做出贡献的所有人!

Babel 7

Babel 7 开发已经很长时间了,几周前它终于发布了正式版。 Parcel v1.10.0 现在支持开箱即用的 Babel 7,同时保留对使用 Babel 6 的现有项目的支持。 当您切换到 Babel 7 时,您应该能看到更快的构建性能,以及对新的语言特性提议的支持。

对于许多 Parcel 项目而言,根本不需要 .babelrc,因为 Parcel 自动支持使用 babel-preset-env 编译现代 JS,以及自动支持 JSX,现在也支持 Flow(见下文)。 对于那些项目,您根本不需要做任何事情来开始使用 Babel 7 - Parcel 将自动为您完成!

在使用 Babel 6 的 .babelrc 的现有项目中,我们将继续正常使用 Babel 6。 如果你的 package.json 中没有对 babel-core 的明确依赖,那么将自动为你安装一个。

如果你想升级到 Babel 7,你需要在你的 package.json 上添加对 @babel/core 的依赖,并删除对 babel-core 的依赖,并调整你的 .babelrc 以指向 Babel 7 插件。之后,Parcel 将自动使用 Babel 7 来构建您的代码。

对于新项目,当您创建 .babelrc 文件时,我们将自动检测插件是否依赖于 Babel 6 或 7,并自动将 babel-core 或 @babel/core 安装到您的项目中。

如果尚未安装,Parcel 现在还将自动安装 .babelrc 中指定的 Babel 插件。现在,您只需要为项目添加一个新插件,就可以将插件添加到 .babelrc 中,Parcel 会为您安装它!

Automatic Flow Support

如果您在 JavaScript 中使用 Flow 类型系统,则通常需要添加 Babel 插件以在构建过程中删除类型。 有了 Parcel v1.10.0,这将自动为您完成。

Parcel 会自动检测顶部带有 @flow 注释的文件,并为您删除类型。 这意味着在您的应用中管理的手动配置更少 - 更容易上手和维护!

Elm Support

Elm 是一种编译为 JavaScript 的函数式编程语言,专为构建 Web 应用程序而设计。 Parcel v1.10.0 现在支持 Elm 开箱即用,零配置!

当检测到 .elm 文件时,如果您尚未安装 elm 编译器工具链,则会自动为您安装 elm 编译器工具链,如果需要,使用 elm.json 文件初始化项目,并将文件编译为 JavaScript。 它会在您更改文件时自动重新加载页面,以便快速开发。

当您准备好投入生产时,Parcel 会为您处理压缩和优化设置。 由于 Elm 没有副作用,因此可以自动启用一些高级优化,从而生成的代码比 JavaScript minifier 通常生成的小得多。

Inline script and style support

Parcel 现在可以处理 HTML 中的内联样式属性,以及内联

image.png

您现在也可以在 HTML 中使用内联的 compile-to-JS(例如 CoffeeScript 或 TypeScript)或者编译为 CSS(例如 SASS 或 Stylus )语言。 只需使用 type 属性:

image.png

如果你想使用,你可以在github上获取到:

https://github.com/parcel-bundler/parcel

英文原文:

https://medium.com/@devongovett/parcel-v1-10-0-babel-7-flow-elm-and-more-c20736553573

目录
相关文章
|
11月前
|
Prometheus 监控 Java
如何全面监控所有的 Spring Boot 微服务
如何全面监控所有的 Spring Boot 微服务
519 3
|
Kubernetes 网络协议 Java
程序技术好文:记一次k8spod频繁重启的优化之旅
程序技术好文:记一次k8spod频繁重启的优化之旅
596 0
|
canal 消息中间件 关系型数据库
Canal作为一款高效、可靠的数据同步工具,凭借其基于MySQL binlog的增量同步机制,在数据同步领域展现了强大的应用价值
【9月更文挑战第1天】Canal作为一款高效、可靠的数据同步工具,凭借其基于MySQL binlog的增量同步机制,在数据同步领域展现了强大的应用价值
1730 4
|
数据采集 Web App开发 JavaScript
Selenium爬虫技术:如何模拟鼠标悬停抓取动态内容
本文介绍了如何使用Selenium爬虫技术抓取抖音评论,通过模拟鼠标悬停操作和结合代理IP、Cookie及User-Agent设置,有效应对动态内容加载和反爬机制。代码示例展示了具体实现步骤,帮助读者掌握这一实用技能。
565 0
Selenium爬虫技术:如何模拟鼠标悬停抓取动态内容
|
存储 缓存 前端开发
前端如何利用indexDB进行数据优化
使用IndexedDB作为浏览器内置的客户端数据库,用于存储大量数据和实现离线支持。它能缓存常用数据,减少服务器请求,提高用户体验。IndexedDB支持数据索引、复杂查询及版本管理,允许离线操作并同步到服务器。但需熟悉其异步API,可借助Dexie.js、localForage等库简化使用。
|
数据采集 机器学习/深度学习 数据可视化
纵横小说网站数据采集与分析实现
本文介绍了一个基于Python的纵横中文网数据采集与分析项目,旨在通过技术手段深入分析网络小说市场,掌握读者需求,评估作品质量,并为网站运营提供策略支持。
600 0
纵横小说网站数据采集与分析实现
|
测试技术 C# 开发者
“代码守护者:详解WPF开发中的单元测试策略与实践——从选择测试框架到编写模拟对象,全方位保障你的应用程序质量”
【8月更文挑战第31天】单元测试是确保软件质量的关键实践,尤其在复杂的WPF应用中更为重要。通过为每个小模块编写独立测试用例,可以验证代码的功能正确性并在早期发现错误。本文将介绍如何在WPF项目中引入单元测试,并通过具体示例演示其实施过程。首先选择合适的测试框架如NUnit或xUnit.net,并利用Moq模拟框架隔离外部依赖。接着,通过一个简单的WPF应用程序示例,展示如何模拟`IUserRepository`接口并验证`MainViewModel`加载用户数据的正确性。这有助于确保代码质量和未来的重构与扩展。
713 0
|
存储 JavaScript API
Vue 3 中实现引导页
Vue 3 中实现引导页
@SneakyThrows 是 Lombok 库中的一个注解
`@SneakyThrows` 是 Lombok 库中的一个注解,它可以让你在方法签名中省略异常声明,而不需要显式地使用 try-catch 块来处理这些异常。当你使用 `@SneakyThrows` 注解时,Lombok 会自动生成相应的 try-catch 代码,将异常封装成运行时异常(通常是 `RuntimeException` 或其子类)。 这个注解在某些情况下可以简化代码,但请注意,它可能会隐藏潜在的问题,因为异常被转换成了运行时异常,这可能导致调用者无法正确处理这些异常。 下面是一个使用 `@SneakyThrows` 的示例: ```java import lombok.S
885 0
|
域名解析 Kubernetes 网络协议
Kubernetes 部署 MySQL 集群
在有状态应用中,MySQL是我们最常见也是最常用的。本文我们将实战部署一个一组多从的MySQL集群。
7768 0
Kubernetes 部署 MySQL 集群