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