@darcytech/babel-preset-darcytech

简介

这个 package 是专为 react 应用设计的 babel 预设。

安装

npm install --save-dev @darcytech/babel-preset-darcytech

用法

配置选项

| 选项 | 含义 | 默认值 | | ------------- |-------------------------------------------------------------------------------|---------| | useTypeScript | 是否使用 TypeScript | true | | runtime | 编译 JSX 使用哪个运行时, React17 推荐使用 automatic (babel7.9.0 开始支持), 旧版 react 使用 classic | classic | | useBuiltIn | 该选项配置 @babel/preset-env 如何处理polyfills | entry |

默认使用

// .babelrc
{
  "presets": ["@darcytech/darcytech"]
}

不使用 Typescript

// .babelrc
{
  "presets": [["@darcytech/darcytech", { "useTypeScript": false }]]
}

最佳实践

使用.browserslistrc 文件指定目标环境

# Browsers that we support

defaults
not IE 11

为不同运行环境，指定环境变量

开发环境：

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

生产环境：

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

有助于减少线上包的大小。

特点

• 支持按需引入 polyfill
• 不污染全局环境
• 支持 React
• 默认支持 TypeScript
• 支持动态导入
• 支持装饰器
• 支持大部分 Javascript 标准

支持的语言特性

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

• ES2021（例如：Promise.any）
• ES2020（例如：Promise.allSettled、可选链操作符）
• ES2019（例如：Array.prototype.flat）
• ES2018（例如：Rest 参数和扩展运算符）
• ES2017（例如：Object.entries）
• ES2016（例如：Array.prototype.includes）
• ES2015
• 支持 Class 的私有字段、私有方法、静态字段

注意

• 不支持 Proxy, 不支持 BigInt
• 不提供 polyfill , 需要自己安装 core-js, 并在项目入口文件引入