babel-preset-h5

babel-preset-h5

h5 应用的通用 babel 预设

相关依赖：

• @babel/core
• @babel/plugin-proposal-class-properties
• @babel/plugin-transform-runtime
• @babel/preset-env
• @babel/preset-react
• @babel/preset-typescript
• @babel/runtime
• @babel/runtime-corejs3
• core-js

如果你应用中 package.json 已经包含上述某几个依赖，请从 package.json 中移除这些依赖。 安装 babel-preset-h5 时会自动安装上述所有依赖。

使用

• 第一步：安装 babel-preset-h5

要求 npm 版本 5.0+

npx install-peerdeps --dev babel-preset-h5

• 第二步：配置 babel 配置文件

// .babelrc
{
  "presets": [
    "babel-preset-h5"
  ]
}

搞定！

配置选项

选项	含义	默认值
targets	代码运行需要支持的环境	['last 2 versions', '> 1%', 'ie >= 11']
useTypeScript	是否使用 TypeScript	true
useReact	是否使用 React	true

特点

• 支持按需引入 polyfill
• 不污染全局环境
• 默认支持 React, 同时支持 react17
• 默认支持 TypeScript4.1
• 支持动态导入

最佳实践

指定环境变量，有助于减少线上包的大小。

比如你可以在 webpack.config.js 中，显示指定环境变量

process.env.BABEL_ENV = "production";
process.env.NODE_ENV = "production";

支持的浏览器

• 默认支持 IE11 及以上的浏览器

支持的语言特性

支持最新的 JavaScript 标准。除了 ES6 语法功能外，它还支持：

• ES2021（例如：Promise.any）
• ES2020（例如：Promise.allSettled、可选链操作符）
• ES2019（例如：Array.prototype.flat）
• ES2018（例如：Rest 参数和扩展运算符）
• ES2017（例如：Object.entries）
• ES2016（例如：Array.prototype.includes）
• ES2015

注意

不支持 Proxy, 不支持 BigInt, 不支持装饰器