搭建vue源码项目环境 - 源码系列1
github同步进行了项目,方便的话,可以直接clone下来,切到env
分支即可。
运行以下命令,建项目目录
mkdir vue-source
cd vue-source
pnpm init (npm i pnpm -g)
git init
根目录加 packages
文件夹,里面加两个文件夹 reactivity
和 shared
,在每个文件夹路径下,分别单独运行pnpm init
,然后再各自的package.json
里,将name
加上作用域,如@vue/reactivity
、@vue/shared
配置,根目录新建文件pnpm-workspace.yaml
packages:
- 'packages/*'
根目录,新建文件.npmrc
进行配置,这样下载的时候,依赖依然在各个包里,而不是提取到.pnpm
shamefully-hoist=true
各个包之间的引用
各个包之间的引用,需要做一些准备工作。
文件夹reactivity
里建 src/index.ts
,
export const isObject = (param) => {
return typeof param === 'object' && param !== null;
};
export function reactive() {}
文件夹shared
里建 src/index.ts
,
import { isObject } from '@vue/reactivity';
console.log(isObject({ a: 1 }));
这里,import { isObject } from '@vue/reactivity'
引用了其他包内容需要进行设置:
运行命令tsc --init
,生成tsconfig.json
,填入以下
{
"compilerOptions": {
"outDir": "./dist/", // 输出目录
"sourceMap": true, // 生成sourceMap
"module": "ESNext", // 模块格式
"target": "ES2016", // 编译后的目标代码
"strict": false, // 非严格模式
"moduleResolution": "node", // 模块解析策略node
"resolveJsonModule": true, // 支持导入json
"esModuleInterop": true, // 支持commonjs导入
"jsx": "preserve", // 不解析jsx
"lib": ["ESNext", "DOM"], // 编译时需要引入的库
"baseUrl": "./", // 用于解析非相对模块名称的基本目录
"paths": {
"@vue/*": ["./packages/*/src"]
} // 路径映射,将@vue/*映射到./packages/*
}
}
最重要的是,paths
的映射。
写打包脚本 - esbuild
- 安装 esbuild
pnpm install esbuild -w -D
- 写脚本 - 建 scripts 文件夹,建 dev.mjs
// const {build} = require('esbuild')
import * as esbuild from 'esbuild';
const target = 'reactivity';
const ctx = await esbuild.context({
entryPoints: [`packages/${target}/src/index.ts`],
outfile: `packages/${target}/dist/${target}.js`, // 出口文件
bundle: true, // 打包成一个文件
minify: false, // 不压缩
sourcemap: true, // 生成sourcemap
format: 'esm', // 输出格式
platform: 'browser', // 平台
});
await ctx.watch();
console.log('watching...');
- 写脚本命令 - package.json
"scripts": {
"dev": "node scripts/dev.mjs",
"start": "pnpm run dev"
},
- 运行命令,生成 dist
pnpm start
好了,搭建环境成功了!
转载自:https://juejin.cn/post/7237032198280233017