这段时间 weapp-vite 的功能更新与优化

自从上次宣布 weapp-vite 的发布，已经过去三个月；weapp-vite 也逐渐迭代至 1.7.6 版本。

在此期间，我对其进行了多项功能的增强和优化，接下来我将为大家详细介绍近期的阶段性成果。

下面列出的功能皆为增强特性，开发者可自由选择启用或关闭，不影响原生小程序的兼容性。

核心功能更新

1. 自动构建 npm

在项目启动时，weapp-vite 会自动构建 npm 依赖，无需再手动点击微信开发者工具中的 构建 npm，提升了一定程度的开发体验。

详细信息请参考：自动构建 npm 文档。

2. 语法增强

2.1 JSON 文件增强

1. 支持注释

weapp-vite 支持在项目中的 JSON 文件中添加注释。例如：

{
  /* 这是一个组件 */
  "component": true,
  "styleIsolation": "apply-shared",
  "usingComponents": {
    // 导航栏组件
    "navigation-bar": "@/navigation-bar/navigation-bar"
  }
}

这些注释会在最终产物内被去除。

注意： project.config.json 和 project.private.config.json 不支持注释，因为这些文件直接由微信开发者工具读取。

2. 智能提示

我生成了许多小程序的 $schema 文件，部署在 vite.icebreaker.top 上。

通过指定 JSON 的 $schema 字段，实现了配置文件的智能提示功能，优化了一点点开发体验。

详见：JSON 配置文件的智能提示。

3. 别名支持

可以在 vite.config.ts 中配置 jsonAlias.entries 字段, 在 usingComponents 中使用别名定义路径，这些在构建时会自动转化为相对路径。

例如:

import type { UserConfig } from 'weapp-vite/config'
import path from 'node:path'

export default <UserConfig>{
  weapp: {
    jsonAlias: {
      entries: [
        {
          find: '@',
          replacement: path.resolve(__dirname, 'components'),
        },
      ],
    },
  },
}

那么就可以在 json 中这样编写:

{
  "usingComponents": {
    "navigation-bar": "@/navigation-bar/navigation-bar",
    "ice-avatar": "@/avatar/avatar"
  }
}

构建结果：

{
  "usingComponents": {
    "navigation-bar": "../../components/navigation-bar/navigation-bar",
    "ice-avatar": "../../components/avatar/avatar"
  }
}

4. 编程支持

weapp-vite 支持使用 JS/TS 文件来编写 JSON，你需要将 component.json 更改为 component.json.ts：

智能提示定义 API 都在 weapp-vite/json 中导出

比如普通写法:

import { defineComponentJson } from 'weapp-vite/json'

export default defineComponentJson({
  component: true,
  styleIsolation: 'apply-shared',
  usingComponents: {},
})

还支持引入异步数据、编译时变量或其他文件：

import type { Page } from 'weapp-vite/json'
import fs from 'node:fs/promises'
import path from 'node:path'
import shared0 from '@/assets/share'
import shared1 from './shared.json'

console.log('import.meta.env: ', import.meta.env)
console.log('import.meta.dirname: ', import.meta.dirname)
console.log('MP_PLATFORM: ', import.meta.env.MP_PLATFORM)
console.log(import.meta.env.DEV, import.meta.env.MODE, import.meta.env.PROD)
const key = await fs.readFile(
  path.resolve(import.meta.dirname, 'x.txt'),
  'utf8'
)

export default <Page>{
  usingComponents: {
    't-button': 'tdesign-miniprogram/button/button',
    't-divider': 'tdesign-miniprogram/divider/divider',
    'ice-avatar': '@/avatar/avatar',
  },
  ...shared0,
  ...shared1,
  key,
}

2.2 WXML 文件增强

事件绑定语法糖

weapp-vite 借鉴了 Vue 的事件绑定风格，为 WXML 增加了事件绑定语法糖：

这里我们以最常用的 tap 事件为例:

<!-- 原始代码 -->
<view @tap="onTap"></view>
<!-- 编译后 -->
<view bind:tap="onTap"></view>

支持的事件绑定增强规则如下：

源代码	编译结果
@tap	bind:tap
@tap.catch	catch:tap
@tap.mut	mut-bind:tap
@tap.capture	capture-bind:tap
@tap.capture.catch / @tap.catch.capture	capture-catch:tap

详见：事件绑定增强文档。

这部分还能做的更多，欢迎与我进行讨论！

2.3 WXS 增强

编程支持（实验性）

weapp-vite 为 WXS 提供了 JS/TS 编程支持，支持通过更改 wxs 后缀为 wxs.js 或 wxs.ts 文件定义逻辑：

比如 index.wxs.ts:

export const foo = '\'hello world\' from hello.wxs.ts'

export const bar = function (d: string) {
  return d
}

另外内联 WXS 也支持使用 lang="js" 或 lang="ts" 直接启用编译功能:

<view>{{test.foo}}</view>
<view @tap="{{test.tigger}}">{{test.abc}}</view>

<wxs module="test" lang="ts">
const { bar, foo } = require('./index.wxs.js')
const bbc = require('./bbc.wxs')
export const abc = 'abc'

export function tigger(value:string){
  console.log(abc)
}

export {
  foo,
  bar,
  bbc
}
</wxs>

详情请参考：Wxs 增强。

3. 生成脚手架

weapp-vite 内置了生成脚手架工具，可快速生成一系列文件（如 js、wxml、wxss 和 json），用于提升开发效率。

最基础的用法只需要 weapp-vite g [outDir]

详情请参考：生成脚手架文档。

4. 分包支持

针对普通分包和独立分包的加载需求进行了优化，用户几乎无需额外配置即可实现分包加载。

尤其是独立分包的场景，创建了独立的编译上下文。

详情请参考：分包加载文档。

不忘初心，持续改进

weapp-vite 的初衷是实现对原生小程序的增强，现有原生小程序几乎可以零成本地迁移过来，并享受更高效的开发体验。

在此，希望各位开发者试用，欢迎反馈与参与。

如果您对文中的任何功能或增强有疑问、建议，欢迎到 Github Discussions 提出讨论！