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+

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

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

`js
// .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 中，显示指定环境变量

`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, 不支持装饰器