vue3源码解析之搭建环境二

创建自己的项目,去尝试编写一个小型的vue3

1. 首先新建一个空文件夹,进入到该空文件夹下执行npm init -y,生成一个package.json
2. 为了保证和vue3相同的文件夹名,在根目录下去创建相应的文件夹和文件,例如:package下的vue/REAADME.md、shared/README.md、compiler-core/README.md、compiler-dom/README.md、reactivity/README.md、runtime-core/README.md、runtime-dom/README.md
3. 要在项目中使用 ts 构建,需要创建对应的 tsconfig.json 配置文件,可以手动创建,在该文件中指定变异项目所需的 文件入口 和编译器 配置,或者通过指令生成包含默认配置的 tsconfig.json 文件全局安装tsnpm install -g typescript@4.7.4,生成默认配置tsc -init,做相关配置,例如配置入口文件等
4. vscode 添加 prettier 插件, 根目录下添加 .prettierrc 文件, 配置

{
    "semi": false,
    "singleQuote": true,
    "printWidth": 80,
    "trailingComma": "none",
    "arrowParens": "avoid"
}

5. 根目录下新建并配置 rollup.config.js 文件,配置入口文件,打包出口,插件等等
6. 安装rollup相关的插件

npm install -D @rollup/plugin-commonjs@22.0.1 @rollup/plugin-node-resolve@13.3.0 @rollup/plugin-typescript@8.3.4

npm i -D tslib@2.4.0 typescript@4.7.4

7. 配置路径映射,在tsconfig.json里配置路径映射,方便后期文件导入

"baseUrl": "./"
"paths": {
  "@vue/*": ["packages/*/src"]
} 

8. 在 package.json 中的 script 添加 bulid: " rollup -c", 在 vue/src/ts 下添加测试代码,运行 npm run bulid, vue文件夹下正常生成dist/vue.js文件,配置成功.