Vue3核心源码笔记#配置环境（获取到打包文件）（一）

Vue3核心源码笔记#配置环境（获取到打包文件）（一）

打包是用monerepo,所以需要安装一下yarn,不能使用npm进行项目初始化，npm install -global yarn yarn init -y

初始化项目

yarn init -y

• 创建packages文件夹

  配置package.json
  {
    "private": true,
    "workspaces": [
      "packages/*"
    ],
    "name": "vue3",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
  }
  

• 在packages文件夹下创建reactivity文件夹和shared文件夹

  reactivity文件是响应式相关源码，shared是共用方法

• 再初始化reactivity和shared文件

  yarn init -y

  分别在两个文件夹下创建src目录，创建index.ts入口文件

  配置package.json文件

  reactivity/package.json
  {
    "name": "@vue/reactivity",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "buildOptions": {
      "name": "VueReactivity",
      "formats": [
        "esm-bundler",
        "cjs",
        "global"
      ]
    }
  }
  

  shared/package.json
  {
    "name": "@vue/shared",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "buildOptions": {
      "name": "VueShared",
      "formats": [
        "esm-bundler",
        "cjs"
      ]
    }
  }
  

• 在vue3根目录下里安装ts,配置tsconfig.json

  yarn add typescript -D -W 这里需要-W
  

  

• 在vue3根目录下安装rollup、rollup相关插件和execa

  yarn add rollup rollup-plugin-typescript2 @rollup/plugin-node-resolve @rollup/plugin-json execa -D -W
  

• 创建打包文件scripts/build.js并且在跟目录下的package.json配置运行脚本

  //进行打包 monerepo
  //(1)获取 打包 目录
  const fs = require('fs')
  
  //过滤掉不是目录的文件，只要对目录进行打包
  const dirs = fs.readdirSync('packages').filter((p) => {
    if (!fs.statSync(`packages/${p}`).isDirectory()) {
      return false
    }
    return true
  })
  
  

  

并行打包

需要在根目录下的package.json下添加type:“module”。tsconfig.json的"module":“ESNext”

//进行打包 monerepo
//(1)获取 打包 目录
import fs from 'fs'
import { execa } from 'execa'
//过滤掉不是目录的文件，只要对目录进行打包
const dirs = fs.readdirSync('packages').filter((p) => {
  if (!fs.statSync(`packages/${p}`).isDirectory()) {
    return false
  }
  return true
})
//并行构建所有的目标
runParallel(dirs, build).then(() => {
  console.log('打包完成')
})
//进行打包 并行打包
async function build(target) {
  console.log('ss')
  await execa('rollup', ['-c', '--environment', `TARGET:${target}`], {
    stdio: 'inherit',
  })
}

async function runParallel(source, iteratorFn) {
  const ret = []
  for (let item of source) {
    const p = Promise.resolve().then(() => iteratorFn(item))
    ret.push(p)
  }
  return Promise.all(ret)
}

Vue环境配置rollup打包

#build环境

在根目录下创建rollup.config.js

//通过rollup进行打包
//（1）引入相关依赖
import path from 'node:path'
import { createRequire } from 'node:module'
import { fileURLToPath } from 'node:url'
import ts from 'rollup-plugin-typescript2' //解析 ts
import json from '@rollup/plugin-json' //解析 json
import resolvePlugin from '@rollup/plugin-node-resolve' //解析 node_modules 中的第三方模块

const require = createRequire(import.meta.url)
const __dirname = fileURLToPath(new URL('.', import.meta.url))
//（2）获取文件路径
let packagesDir = path.resolve(__dirname, 'packages')
//2.1 获取需要打包的包
let packageDir = path.resolve(packagesDir, process.env.TARGET)
//2.2 打包获取到 每个包的项目配置
const resolve = (p) => path.resolve(packageDir, p)
const pkg = require(resolve('package.json'))

//（3）配置打包参数
const packageOptions = pkg.buildOptions || {}
const name = packageOptions.filename || path.basename(packageDir) //获取包名
//创建一个表
const outputOptions = {
  'esm-bundler': {
    file: resolve(`dist/${name}.esm-bundler.js`),
    format: 'es',
  },
function createConfig(format, output) {
  console.log(output, 'output')
  output.name = packageOptions.name
  output.sourcemap = true //调试代码
  //生成rollup 配置
  return {
    input: resolve('src/index.ts'), //入口文件
    output,
    plugins: [
      json(),
      ts({
        tsconfig: path.resolve(__dirname, 'tsconfig.json'),
      }),
      resolvePlugin(),
    ],
  }
}
export default packageOptions.formats.map((format) =>
  createConfig(format, outputOptions[format])
)

执行npm run build 命令

执行npm run build 时出现在reactivity和shared文件夹下出现dist目录

在配置rollup.config.js可能会出现一些报错，一般有一下的情况

• 根目录下的package.json里的type:“module”,而使用了commonjs相关的东西，需要进行模块化和代码统一。
• rollup.config.js里的配置可能一些数据没有生效，一般也是配置问题，最好参考Vue3的源码进行配置。
• src/index.ts 文件里没有代码暴露出来。

#dev环境

代码更新时也需要同步更新打包的代码

在scripts文件夹下创建dev.js

import { execa } from 'execa'
async function build(target) {
  await execa('rollup', ['-cw ', '--environment', `TARGET:${target}`], {
    stdio: 'inherit',
  })
}
build('reactivity')

在reactivity/src/index.ts引入shared/src/index.ts文件里的变量

• 需要配置tsconfig.json

    tsconfig.json
      "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
      "baseUrl": "." /* Specify the base directory to resolve non-relative module names. */,
      "paths": {
        "@vue/compat": ["packages/vue-compat/src"],
        "@vue/*": ["packages/*/src"],
        "vue": ["packages/vue/src"]
      }
  

• reactivity/src/index.ts
  import { g } from '@vue/shared/src/index'
  let b = 1
  let a = 3
  let k = g
  export default {
    a,
    b,
    k,
  }
  

• reactivity/src/index.ts
  import { g } from '@vue/shared/src/index'
  let b = 1
  let a = 3
  let k = g
  export default {
    a,
    b,
    k,
  }