第二章、框架设计的核心要素

1、在开发环境下抛出有意义的警告信息，利用Tree-Sharking机制，预定义__DEV__常量，实现仅在开发环境下输出警告信息。

2、使用/*#__PURE__*/注释，辅助构建工具进行Tree-Sharking。

3、输出IIFE格式满足用户直接通过<script>引用，输出ESM格式满足用户通过<script type="module">引用，ESM有两种格式：用于浏览器的会将__DEV__替换为字面量true或false，用于打包工具的会替换为process.env.NODE_ENV !== 'production'。

4、用户可以通过特性开关关闭对应的特性，这样在打包的时候可以Tree-Sharking减少打包体积。Vue3可以通过特性关闭 options API。

5、良好的错误处理，统一报错接口。

let handlerError = null
export default {
    foo(fn) {
        // 封装统一的错误处理函数进行报错处理
        callWithErrorHandling(fn)
    },
    // 通过该函数，用户可以自定义注册统一的错误处理函数
    registerErrorHandle(fn) {
        handlerError = fn
    }
}

function callWithErrorHandling(fn) {
    try {
        fn && fn()
    } catch (e) {
        handlerError && handlerError(e)
    }
}

// Vue中注册统一的错误处理函数
import { createApp } from 'vue'
import App from 'App.vue'
const app = createApp(App)
app.config.errorHandler = () => {
    // 处理报错
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

6、良好的TypeScript类型支持

# 第二章、框架设计的核心要素

第二章、框架设计的核心要素