目录结构设计
- 创建 vue-mini 目录
- 在该目录中，初始化npm包：$
npm init -y - 创建package.json文件
- 创建packages 目录，作为核心代码区域
- 在内创建vue目录：打包，测试实例，项目整体入口模块
- 在内创建 shared 目录：共享公共方法模块
- 在内创建 compiler-core 目录：编译器核心模块
- 在内创建 compiler-dom 目录：浏览器相关编译器模块
- 在内创建 reactivity 目录：响应性模块
- 在内创建 runtime-core 目录：运行时核心模块
- 在内创建 runtime-dom 目录：浏览器相关运行时模块
为框架导入配置ts
- TS环境
- 主要是类型的世界
- $
npm i -g typescript - $
tsc -v - $
tsc -init生成ts配置文件- 配置文件参考：typescriptlang.org/tsconfig
引入 prettier 来格式化代码
-
vscode 扩展，添加插件，搜索：Prettier - Code formatter
-
在项目根目录下，创建 .prettierrc
{"semi": false, // 格式化不需要分号"singleQuote": true, // 格式化代码使用单引号"printWidth": 80, // 代码长度大于80之后，就开始换行"trailingComma": "none", // 不尾随添加 , 如果值为 es5, 则会在对象的最后一个自动加上 ,"arrowParens": "avoid" // 省略箭头函数小括号，示例：const fn = (a) => {}；always 是保留小括号 示例： const fn = a => {} } -
如果想要配置保存时格式化，那么需要在设置中搜索 save 进行配置
-
同时注意，prettier 可能会和其他格式化工具存在冲突导致代码丢失，在使用中仅使用一个作为格式化的工具
模块打包器 rollup
- 文档：rollupjs.com
- webpack打包会产生一些冗余代码，在开发大型项目中影响不大，如果我们开发一个库，这些冗余代码就会大大增加库的体积，这就不美好了
- 这个小而美的工具就是 rollup
- 新建文件 rollup.config.js
- 默认导出数组，数组中的每一个对象都是一个单独的导出文件配置，详细可查：http://www.rollupjs.com/guide/big-list-of-options
- 安装依赖插件
- $
cnpm i -D @rollup/plugin-commonjs@22.0.1 @rollup/plugin-node-resolve@13.3.0 @rollup/plugin-typescript@8.3.4
- $
- 创建打包命令
- 在package.json中添加 build命令
"build": "rollup -c"- -c 是指读取rollup的配置文件
- 编写测试代码
* - 开始打包：$
npm run build- 此时会报错：RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module.
- 解决方案：在package.json中添加 “type” :“module”,
- 此时仍会报错：cannot find module ‘typescript’
- 解决方案：项目中使用ts，但是还缺少其他插件：cnpm i -D tslib@2.4.0 typescript@4.7.4
- 此时打包成功
配置路径映射
- ts中的一项api, 也就是 路径 - path
- 可以让程序员不用相对路径访问api，只需要添加配置，就可自动解析路径
- 在tsconfig.ts中配置，compilerOptions.baseUrl = “.”
- 再配置 compilerOptions.paths
"paths": {"@vue/*": ["packages/*/src"] } - 之后，就可以使用了, 示例
import { isArray } from '@vue/shared'console.log(isArray([]))
