darkcityX

Appearance

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

框架设计的考虑因素：

  • 需要哪些构建产物？
  • 产物模块格式
  • 提供合适的警告信息提升开发体验
  • 开发版本与生产版本的区别
  • 是否支持热更新
  • 是否可以通过特性开关控制对应特性，减少打包体积
  • 是否需要支持强类型语言

2.1 框架的输出产物 ​

  • 2.1.1 支持 <script> 标签直接引入，需要输出 IIFE <Immediately Invoked Function Expression> [立即调用的函数表达式] 格式的代码。
javascript
var Vue = (function(exports) {
  export.createApp = createApp;

  return exports;
}({}))

配置格式： format：‘iife’

  • 2.1.2 支持 <script type="module"> 标签直接引入，需要输出 ES Module 格式的代码。

配置格式： format: 'esm'

tips:

  • vue.esm-browser.js : 给 <script type="module"> 浏览器使用。
  • vue.runtime.esm-bundler.js： 给 webpack/roll.js等打包工具使用。

bundler 包 会把框架代码中 __DEV__ 替换成当前工程配置中的全局环境变量 process.env.NODE_ENV， 可以通过 webpack配置自行决定构建资源的目标环境

  • 2.1.3 支持 Node.js 环境的 require 语法，需要输出 CommonJS 格式的代码，简称 cjs。原因是需要支持 服务器端渲染。

配置格式： format: 'cjs'

javascript
const Vue = require('vue')

2.2 提升开发体验-合理的警告信息 ​