上海想找人设计网站,江苏省建设厅网站是,什么是黄页,安徽安庆邮编课程地址#xff1a;【已完结】全网最详细Vue3源码解析#xff01;#xff08;一行行带你手写Vue3源码#xff09; 第一部分#xff1a;实现vue3环境搭建#xff08;对应课程的第1-3节#xff09;
VUE2与VUE3的对比#xff1a;
也即vue2的痛点#xff1a;
对TypeSc… 课程地址【已完结】全网最详细Vue3源码解析一行行带你手写Vue3源码 第一部分实现vue3环境搭建对应课程的第1-3节
VUE2与VUE3的对比
也即vue2的痛点
对TypeScript支持不友好所有属性都放在this对象上难以推导数据类型大量API挂载在vue对象原型上难以实现TreeShaking架构层面对跨平台DOM渲染开发支持不友好这一点我不太理解推出CompositionAPI受reactHook启发对虚拟DOM进行了重写对模板的编译进行了优化
Monorepo介绍
Monorepo 是一种项目代码管理方式指单个仓库中管理多个项目是一种将多个peckage放在一个repo中的代码管理模式。其有助于简化代码共享、版本控制、构建和部署等方面的复杂性并提供更好的可重用性和协作性。更多可参阅带你了解更全面的 Monorepo - 优劣、踩坑、选型 vue3中使用 yarn workspacelerna 来管理项目。
Monorepo环境搭建
1、项目初始化由于Monorepo是不支持npm的所以使用yarn来初始化一个项目
yarn init -y2、 Monorope分包打开项目根目录中的package.json文件在其中加入如下配置private与workspaces
//package.json
{private: true,workspaces: [packages/*],name: vue3,version: 1.0.0,main: index.js,license: MIT,dependencies: {typescript: ^5.3.3},devDependencies: {rollup/plugin-json: ^6.1.0,rollup/plugin-node-resolve: ^15.2.3,execa: ^8.0.1,rollup: ^4.9.6,rollup-plugin-typescript2: ^0.36.0},type:module
}private表示私有workspaces表示分包所有的包都会放在packages目录下
3、新建两个包文件夹 根目录下新建packages文件夹在packages目录下新建reactivity与shared文件夹并分别进入reactivity与shared文件夹中分别执行 yarn init -y 生成各自的package.json文件并在这两个文件夹下各自创建src文件在src中创建入口文件index.ts 在两个index.ts文件中随意编写一点不同的代码如不写代码稍后打包时会报错如
let a 1
export {a
}4、安装ts注意如果是所有包都要用的比如ts那就安装在最外层的package.json中即项目根目录中的package.json中
yarn add typescript -D -W-D表示开发环境由于进行了分包所以在根目录中安装需要加上 -W 配置项 5、通过ts的tsc命令自动生成配置项tsconfig.json
npx tsc --init6、安装rollup打包的相关依赖在命令行中执行如下命令
yarn add rollup rollup-plugin-typescript2 rollup/plugin-node-resolve rollup/plugin-json execa -D -W7、创建一个脚本执行命令scripts在根目录中的package.json中 8、配置打包选项分别在reactivity和shared文件夹下的package.json文件中配置各个包对应的打包配置 将name分别修改为vue/reactivity 与 “vue/shared” reactivity文件夹下的package.json增加如下配置 shared文件夹下的package.json增加的配置中去掉global
buildOptions:{name:VueReactivity, // shared文件夹下为VueSharedformats:[esm-bundler,cjs,global // shared文件夹下的package.json增的配置中去掉此行]}9、编写打包配置文件build.js
// build.js
/ 1、获取打包目录
// const fs require(fs)
// const execa require(execa)import fs from fs
import {execa} from execa// 读取packages下所有文件名字并过滤掉非文件夹只保留packages下的文件夹
const dirs fs.readdirSync(packages).filter(p{if(!fs.statSync(packages/${p}).isDirectory()){return false}return true
})console.log(888888,dirs) //[ reactivity, shared ]// 2、进行打包 并行打包
async function build(target){console.log(target,666)// await execa(rollup,[-c --bundleConfigAsCjs,--environment,TARGET:${target}],{stdio:inherit})await execa(rollup,[-c,--environment,TARGET:${target}],{stdio:inherit})
}function runParaller(dirs,itemfn){let result []for(let item of dirs){result.push(itemfn(item))}return Promise.all(result)
}runParaller(dirs,build).then((){console.log(成功)
})10、根目录下新建rollup配置文件rollup.config.js在其中编写配置代码
// 编写打包配置
// import ts from rollup-plugin-typescript2 //解析ts
// import json from rollup/plugin-json
// import resolvePlugin from rollup/plugin-node-resolve // 解析第三方插件
// import path from path // 处理路径const ts require(rollup-plugin-typescript2) //解析ts
const json require(rollup/plugin-json)
const resolvePlugin require(rollup/plugin-node-resolve) // 解析第三方插件
const path require(path) // 处理路径// 2获取文件路径
let packagesDir path.resolve(__dirname,packages)
// console.log(packagesDir, 888) // D:\suyou\study\vue3-source-code\vue3\packages// 2.1 获取需要打包的包
let packageDir path.resolve(packagesDir, process.env.TARGET)
// console.log(packageDir, 888) // D:\suyou\study\vue3-source-code\vue3\packages\reactivity// 2.1 获取到每个包的项目配置
const resolve p path.resolve(packageDir, p)
const pkg require(resolve(package.json)) // 获取json
const packageOptions pkg.buildOptions || {}
const name path.basename(packageDir)
console.log(packageOptions, 888) //{ name: VueReactivity, formats: [ esm-bundler, cjs, global ] }
console.log(name, 888) // reactivity// 3 创建一个表
const outputOptions {esm-bundler:{file: resolve(dist/${name}.esm-bundler.js),format:es},cjs: {file: resolve(dist/${name}.cjs.js),format: cjs},global: {file: resolve(dist/${name}.global.js),format: iife},
}const options pkg.buildOptionsfunction createConfig(format,output){// 进行打包output.name options.nameoutput.sourcemap true// 生成rollup配置return {input:resolve(src/index.ts),output,plugins:[json(),ts({ //解析tstsconfig:path.resolve(__dirname,tsconfig.json)}),resolvePlugin() //解析第三方插件]}
}// export default options.formats.map(format createConfig(format, outputOptions[format]))module.exports options.formats.map(format createConfig(format, outputOptions[format]))
11、将 tsconfig.json中的 target 和module 字段都改为 ESNext 12、运行打包npm run build成功 此时会发现reactivity文件夹和shared文件夹下会出现打包生成的dist文件夹 13、根目录下package.json文件中新增 dev 运行脚本命令 14、scripts目录下新建dev.js并在其中编写 -c’处增加w表示实时监控文件更新并自动编译
// dev.js
import {execa} from execa// 进行打包
async function build(target){// console.log(target,666) // reactivity // {stdio:inherit} 配置项表示在子进程中输出内容可以在主包中输出await execa(rollup,[-cw,--environment,TARGET:${target}],{stdio:inherit})
}build(reactivity)运行npm run dev此时可以修改代码后实时打包 15、解决包之间的引入问题 在reactivity的入口文件中引入shared:
import {b} from vue/shared此时 vue/shared 处会出现波浪线提示找不到这个模块。这时就需要到tsconfig.json中增加如下配置
// 解决引入的问题 tsmoduleResolution: node, //nodebaseUrl: ., // 根路径paths:{vue/*:[packages/*/src]} 总结 1、yarn init -y初始工程 2、package.json文件中增加 “private”:“true”; “workspaces”:[“packages/*”] 3、项目目录下新建文件夹packages在其中新建两个文件夹reactivity、shared,分别进入这两个文件夹执行yarn init -y生成各自的package.json,分别在其package.json文件中增加配置 修改name:“vue/reactivity” name:“vue/shared” 增加buildOptions:{ “name”:“VueReactivity” “name”:“VueShared” format:[ “esm-bundler”, “cjs”, “global” ] } 4、分别在文件夹reactivity、shared中新建src文件夹并在其中新建index.ts入口文件 5、使用ts就要安装ts因为ts是全局使用的所以需要安装在根目录下即在根目录下执行 yarn add typescript -D -W (-D表示开发环境由于进行了分包所以在根目录中安装需要加上 -W 配置项) 6、ts安装完成后node_modules目录下会新增typescript-bin-tsc此时使用tsc生成ts配置文件执行npx tsc --init,自动生成 tsconfig.json 文件 7、安装rollup打包的相关依赖 yarn add rollup rollup-plugin-typescript2 rollup/plugin-node-resolve rollup/plugin-json execa -D -W 8、配置脚本执行命令根目录 package.json 文件中新增 “scripts”:{ “build”:“node scripts/build.js” } 9、根目录下新建scripts目录并在其中创建build.js文件在其中编写打包逻辑代码详见代码 10、根目录下新建rollup配置文件rollup.config.js在其中编写配置代码详见代码 11、将 tsconfig.json中的 target 和 module 字段都改为 ESNext不然运行打包会报错 12、配置开发环境打包根目录package.json中添加dev运行命令并在scripts目录下新建对应的dev.js文件在其中编写打包逻辑代码详见代码 13、解决包之间引入问题在tsconfig.json中增加相应配置详见代码 14、运行打包 npm run build 或 npm run dev实现都可以成功打包 实践问题
编写build.js这一步跟着课程里的代码自己实践中我遇到了问题记录如下 猜测报错信息大致是说execa不支持用require方式引入改成import试试吧又出现如下报错 按照提示在package.json中增加type: “module”还是报错 报错信息说execa没提供default暴露的接口那就用 import {} 方式试试 这是注意报错不是execa引入有问题了而是fs有问题了因为我们配置了type: “module”所以把fs引入方式也改成import方式 此时的报错信息为找不到rollup配置文件了。 在rollup.config.js配置文件中编写如下代码运行后报错如下 按照错误提示把rollup.config.js文件后缀分别改为.cjs和.mjs以及在execa()执行配置项中增加–bundleConfigAsCjs 都无效 在execa()执行配置项中增加–bundleConfigAsCjs 时报这个错 最终解决方案如下将依赖的引入方式都改为require形式同时将配置文件后缀改为.cjs 解决思路来源于rollup官网中的一句话。看来还是要多看官方文档。 rollup.config.js文件中的配置编写完成后运行报错如下 将export default 方式改为 module.exports 方式后此报错解决出现如下报错 参考 第11 步解决
