开发环境搭建

本节目标：理解“开发环境搭建”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。

==搭建====Monorepo====环境==
==Vue3====中使用====pnpm== ==workspace====来实现====monorepo== ==(====pnpm====是快速、节省磁盘空间的包管理器。主要采用符号链接的方式管理模块====)==

==#====全局安装====pnpm==
npm install pnpm -g # 全局安装pnpm
pnpm init -y # 初始化配置文件

==#====创建====.npmrc====文件== shamefully-hoist=true ==这里您可以尝试一下安装====Vue3====,== ==pnpm install vue@next====此时，由于我们是在====workspace-root====运行此命令，默认情况下====vue3====所====依赖的其它模块不会被提升到====node_modules====下，而是放在了====node_modules/.pnpm====下，如图：==

==这样，如果其它包也依赖这些模块，就可以共享了；此时，如果我们删除掉====vue====，====.pnpm====下====vue3====依赖的包并不会被删除，称之为幽灵依赖；====这样会有多余的用不到的包产生；== ==添加羞耻的提升可以将====Vue3====，所依赖的模块提升到====node_modules====中；==

==#====配置====workspace== ==新建== ==pnpm-workspace.yaml== packages:

'packages/*' ==将====packages====下所有的目录都作为包进行管理。这样我们的====Monorepo====就搭建好了。确实比====lerna + yarn workspace====更快捷==

==#====环境搭建==
==打包项目====Vue3====采用====rollup====进行打包代码，安装打包所需要的依赖==
pnpm install typescript rollup rollup-plugin-typescript2 @rollup/plugin-json @rollup/plugin-node-resolve @rollup/plugin-commonjs minimist execa@4 esbuild   -D -w(workspace-root) 表示安装到根目录位置

==支持====Ts==

| |

typescript

在项目中支持Typescript

==开发环境打包用到的模块：==
esbuild

| |

execa@4

==生产环境使用====rollup====打包用到的模块：==

| |

rollup

打包工具

rollup-plugin-typescript2

rollup 和 ts的 桥梁

@rollup/plugin-json

支持引入json
```text
|

@rollup/plugin-node-resolve

解析node第三方模块

@rollup/plugin-commonjs

将CommonJS转化为ES6Module

解析命令行：

|
|

minimist

命令行参数解析

开启子进程

|
|

execa@4

开启子进程

==#====创建模块== ==我们现在====packages====目录下新建两个====package====，用于下一章手写响应式原理做准备==

==reactivity== ==响应式模块==

==shared== ==共享模块==

==所有包的入口均为====src/index.ts== ==这样可以实现统一打包== ==reactivity/package.json== { "name": "@vue/reactivity", "version": "1.0.0", "main": "index.js", "module": "dist/reactivity.esm-bundler.js", "unpkg": "dist/reactivity.global.js", =="buildOptions"====:== =={== ==//== ==自定义的配置== =="name"====:== =="VueReactivity"====,====global====格式需要指定的全局变量名== =="formats"====:== ==[== =="esm-bundler"====,== =="cjs"====,== =="global"== ==]== ==}== } ==shared/package.json== { "name": "@vue/shared", "version": "1.0.0", "main": "index.js", "module": "dist/shared.esm-bundler.js", "buildOptions": { =="formats"====:== ==[== ==//== ==只在开发工具中使用，所以不需要====gobal====格式== =="esm-bundler"====,== =="cjs"== ==]== } }

==formats====为自定义的打包格式，有：==

==esm-bundler====在构建工具中使用的格式；==

==esm-browser====在浏览器中使用的格式；====<script type='modle"></script>==

==cjs====在====node====中使用的格式；==

==global====立即执行函数的格式==

==具体区别可以看打包后的源码；== pnpm install@vue/shared@workspace --filter @vue/reactivity

==为两个====package====建立打包入口文件：== ==reactivity/src/index.ts== export const isObject = () =>

==shared/src/index.ts== import { isObject } from '@vue/shared';


==这时候，我们如果在====shared/src/index.ts====中新增一个方法，如果我们想在====reactivity/src/index.ts====中使用这个方法，会报错：==
已声明“isObject”，但从未读取其值。ts(6133)
找不到模块“@vue/shared”或其相应的类型声明。ts(2307)

==必须配置====typesrcipt====；== ==#====初始化====TS== pnpm tsc --init $ pnpm tsc --init

Created a new tsconfig.json with: TS target: es2016 module: commonjs strict: true esModuleInterop: true skipLibCheck: true forceConsistentCasingInFileNames: true

You can learn more at https://aka.ms/tsconfig.json

==先添加些常用的====ts-config====配置，后续需要其他的在继续增加== { "compilerOptions": { "outDir": "dist", // 输出的目录 "sourceMap": true, // 采用sourcemap "target": "es2016", // 目标语法 "module": "esnext", // 模块格式 "moduleResolution": "node", // 模块解析方式 "strict": false, // 严格模式 "resolveJsonModule": true, // 解析json模块 "esModuleInterop": true, // 允许通过es6语法引入commonjs模块 "jsx": "preserve", // jsx 不转义 "lib": [ "esnext", "dom" ], // 支持的类库 esnext及dom "baseUrl": ".", "paths": { // 路径映射，相对于baseUrl "@vue/": [ "packages//src" ] } } }

==配置====ts====找包的选项，这样，====package====下的各个包就可以相互找到了；== "baseUrl": ".",// 以当前路径为基准 =="paths"====:== =={== =="@vue/"====:== ==[====//== ==以这个开头的包，到这个位置下去找，值为一个数组== =="packages//src"== ==]== ==}==

"baseUrl": "./", "paths": {

   `//` 如使用`jq`时不想使用默认版本，而需要手动指定版本，可进行如下配置

"jquery": [

     `"node_modules/jquery/dist/jquery.min.js"`

] },

开发环境搭建 ​

开发环境搭建