使用 ES6+ 语法

上一章节中，我们确认了当前 IDE 的编程环境。

这一章节中，我们沿用上一章节的项目和编码环境，实现一个最简单的联系人列表。

Modern.js 支持 src 目录下直接使用 ES6+（ES2015+）语法，原则上包括：

1. 已经进入 Stage 4（完成阶段）的语法，包括 ES2015（ES6）到 ES2020（ES11）以及后续版本。

2. 部分很有用且确定性较强（重构也容易）的 Stage 1（提案阶段）、Stage 2（草案阶段）、Stage 3（候选阶段）语法，比如：

   • Decorators（默认使用 legacy 提案，可通过 output.enableLatestDecorators 使用新版提案）
   • Class Public Properties
   • Class Private Properties、Class Private Methods
   • Pipeline Operator（默认为 minimal 提案）
   • Partial Application
   • Bind Operator
   • export default from, export namespace from
   • Optional Catch Binding
   • Numeric Separator

我们把 src/App.jsx 改成：

const getAvatar = users =>
  users.map(user => ({
    ...user,
    avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
  }));

const mockData =
  [
    { name: 'Thomas', email: 'w.kccip@bllmfbgv.dm' },
    { name: 'Chow', email: 'f.lfqljnlk@ywoefljhc.af' },
    { name: 'Bradley', email: 'd.wfovsqyo@gpkcjwjgb.fr' },
    { name: 'Davis', email: '"t.kqkoj@utlkwnpwk.nu' },
  ] |> getAvatar;

function App() {
  return (
    <ul>
      {mockData.map(({ name, avatar, email }) => (
        <li key={name}>
          <img src={avatar} width={60} height={60} /> ---
          <span>{name}</span> ---
          <span>{email}</span>
        </li>
      ))}
    </ul>
  );
}

export default App;

可以看到其中使用了多种 ES6+ 语法（注意生成 mockData 过程中使用了 Pipeline Operator 语法），都不需要做任何配置。

运行 pnpm run dev，查看运行结果：

---

本小节的代码可以在这里查看。