关于前端:源码库跟着-Vue3-学习前端模块化

Vue3为了反对不同的用户群体，提供了多种模块化计划，这样使得咱们在应用的Vue的应用能够有很多种形式；

例如咱们能够间接在html中应用script标签引入Vue，也能够前端工程化工具，例如webpack、rollup等打包工具，将Vue打包到咱们的我的项目中，甚至还能够在nodejs中应用服务端渲染的形式来应用Vue；

明天就跟着Vue3的源码，一起来看看Vue3是如何反对这些模块化计划的，以及咱们在应用Vue的时候，应该如何抉择适合的模块化计划；

这里是源码浏览第一篇文章，感兴趣的小伙伴能够点击退出群聊一起独特成长提高，文章在掘金是首发，所以图片会带掘金的水印，无任何引流的意思。

筹备工作

这是第一篇对于Vue3源码的文章，所以咱们须要先筹备一些工作，能力开始咱们的源码学习之旅；

源码 clone

找到Vue3的源码：https://github.com/vuejs/core

源码下载的形式有很多种，这里倡议大家下载到本地，不便前面的调试和学习；

能够间接在github上下载，也能够应用git命令下载：

git clone https://github.com/vuejs/core.git

还能够fork到本人的仓库，而后应用git命令下载，git和下面雷同，这里就不再赘述；

环境筹备

Vue3的包管理工具应用的是pnpm，这个能够在Vue3的源码中的package.json文件中找到：

{
  "version": "3.2.45",
  "packageManager": "pnpm@7.1.0",
  "engines": {
    "node": ">=16.11.0"
  }
}

下面列举的就是Vue3的开发环境，截取自Vue3的package.json文件；

version：Vue3的版本号
packageManager：Vue3的包管理工具，这里是pnpm，版本号是7.1.0
engines：Vue3的开发环境，这里是node，版本号是>=16.11.0

所以咱们在学习Vue3的源码之前，须要先装置pnpm和node，并且须要留神它们的版本号；

这里怎么装置pnpm和node，大家自行查问，应该不会有什么问题；

pnpm installation
nodejs

环境筹备好了之后，咱们通过pnpm装置Vue3的依赖：

cd [源码目录]

pnpm install

Vue3 模块化计划

下面的筹备工作做完了之后，咱们就能够开始学习Vue3的源码了；

咱们明天须要理解的是Vue3的模块化实现，模块化离不开构建工具，Vue应用的rollup作为构建工具；

先不论应用的是什么构建工具，最终是肯定要通过构建工具来打包咱们的代码，而打包的命令通常是封装在package.json中的；

所以咱们间接看一下Vue3的package.json，看看外面封装的命令有哪些：

{
  "scripts": {
    "dev": "node scripts/dev.js",
    "build": "node scripts/build.js",
    "size": "run-s size-global size-baseline",
    "size-global": "node scripts/build.js vue runtime-dom -f global -p",
    "size-baseline": "node scripts/build.js runtime-dom runtime-core reactivity shared -f esm-bundler && cd packages/size-check && vite build && node brotli",
    "lint": "eslint --cache --ext .ts packages/*/{src,__tests__}/**.ts",
    "format": "prettier --write --cache --parser typescript "packages/**/*.ts?(x)"",
    "format-check": "prettier --check --cache --parser typescript "packages/**/*.ts?(x)"",
    "test": "run-s "test-unit {@}" "test-e2e {@}"",
    "test-unit": "jest --filter ./scripts/filter-unit.js",
    "test-e2e": "node scripts/build.js vue -f global -d && jest --filter ./scripts/filter-e2e.js --runInBand",
    "test-dts": "node scripts/build.js shared reactivity runtime-core runtime-dom -dt -f esm-bundler && npm run test-dts-only",
    "test-dts-only": "tsc -p ./test-dts/tsconfig.json && tsc -p ./test-dts/tsconfig.build.json",
    "test-coverage": "node scripts/build.js vue -f global -d && jest --runInBand --coverage --bail",
    "release": "node scripts/release.js",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
    "dev-esm": "node scripts/dev.js -if esm-bundler-runtime",
    "dev-compiler": "run-p "dev template-explorer" serve",
    "dev-sfc": "run-s dev-sfc-prepare dev-sfc-run",
    "dev-sfc-prepare": "node scripts/pre-dev-sfc.js || npm run build-compiler-cjs",
    "dev-sfc-serve": "vite packages/sfc-playground --host",
    "dev-sfc-run": "run-p "dev compiler-sfc -f esm-browser" "dev vue -if esm-bundler-runtime" "dev server-renderer -if esm-bundler" dev-sfc-serve",
    "serve": "serve",
    "open": "open http://localhost:5000/packages/template-explorer/local.html",
    "build-sfc-playground": "run-s build-compiler-cjs build-runtime-esm build-ssr-esm build-sfc-playground-self",
    "build-compiler-cjs": "node scripts/build.js compiler reactivity-transform shared -af cjs",
    "build-runtime-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime",
    "build-ssr-esm": "node scripts/build.js compiler-sfc server-renderer -f esm-browser",
    "build-sfc-playground-self": "cd packages/sfc-playground && npm run build",
    "preinstall": "node ./scripts/preinstall.js",
    "postinstall": "simple-git-hooks"
  }
}

这外面有很多命令，通常状况下打包的命令是build，去掉build之后的命令，咱们能够看到Vue3的打包命令是：

{
  "scripts": {
    "build": "node scripts/build.js",
    "build-sfc-playground": "run-s build-compiler-cjs build-runtime-esm build-ssr-esm build-sfc-playground-self",
    "build-compiler-cjs": "node scripts/build.js compiler reactivity-transform shared -af cjs",
    "build-runtime-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime",
    "build-ssr-esm": "node scripts/build.js compiler-sfc server-renderer -f esm-browser",
    "build-sfc-playground-self": "cd packages/sfc-playground && npm run build"
  }
}

这外面有很多的命令，先简略解释一下这些命令的意思：

build：打包所有的包，等会次要剖析这个命令；
build-sfc-playground：打部署Vue3的SFC的playground:https://sfc.vuejs.org
build-compiler-cjs：打包compiler的cjs包，这个包是Vue3的编译器
build-runtime-esm：打包runtime的esm包，这个包是Vue3的运行时
build-ssr-esm：打包ssr的esm包，这个包是Vue3的服务端渲染
build-sfc-playground-self：这个是独自打包Vue3的SFC的playground的包

能够看到这些命令都是node scripts/build.js，除了build-sfc-playground-self，其余的命令前面都会带上一些参数，这些参数是什么意思呢？咱们来看一下scripts/build.js的代码。

scripts/build.js

这个文件不到200行，咱们来看一下这个文件的代码，这个文件的代码如下：

const fs = require('fs-extra')
const path = require('path')
const chalk = require('chalk')
const execa = require('execa')
const { gzipSync } = require('zlib')
const { compress } = require('brotli')
const { targets: allTargets, fuzzyMatchTarget } = require('./utils')

const args = require('minimist')(process.argv.slice(2))
const targets = args._
const formats = args.formats || args.f
const devOnly = args.devOnly || args.d
const prodOnly = !devOnly && (args.prodOnly || args.p)
const sourceMap = args.sourcemap || args.s
const isRelease = args.release
const buildTypes = args.t || args.types || isRelease
const buildAllMatching = args.all || args.a
const commit = execa.sync('git', ['rev-parse', 'HEAD']).stdout.slice(0, 7)

run()

async function run() {
    // ...
}

async function buildAll(targets) {
    // ...
}

async function runParallel(maxConcurrency, source, iteratorFn) {
    // ...
}

async function build(target) {
    // ...
}

function checkAllSizes(targets) {
    // ...
}

function checkSize(target) {
    // ...
}

function checkFileSize(filePath) {
    // ...
}

不便查看，这里删除函数中的代码，只保留函数的申明

能够看到这里是间接执行的run函数，这个函数的代码如下：

async function run() {
  if (isRelease) {
    // remove build cache for release builds to avoid outdated enum values
    await fs.remove(path.resolve(__dirname, '../node_modules/.rts2_cache'))
  }
  if (!targets.length) {
    await buildAll(allTargets)
    checkAllSizes(allTargets)
  } else {
    await buildAll(fuzzyMatchTarget(targets, buildAllMatching))
    checkAllSizes(fuzzyMatchTarget(targets, buildAllMatching))
  }
}

这里有两个判断，应用了定义的全局变量，一个是isRelease，一个是targets，先来看一下这两个变量是怎么获取的。

const args = require('minimist')(process.argv.slice(2))
const targets = args._

const isRelease = args.release

这里是用过minimist包来获取process.argv的参数；

minimist是一个解析命令行参数的包，能够将命令行参数解析成一个对象，比方node build.js --release，这里的release就是一个参数，能够通过minimist来解析成一个对象，这个对象的key就是参数的名字，value就是参数的值

targets指向的是args._，isRelease指向的是args.release，这两个变量的值是什么呢？咱们间接开启调试模式看一下，这里应用的是build命令；

因为build命令是没有参数的，所以这两个变量都是是没有值的，然而tarets指向的args._是一个是空数组，isRelease是失常的undefined；

所以build命令会执行上面的两个函数：

await buildAll(allTargets)
checkAllSizes(allTargets)

这里又呈现了一个全局变量allTargets，乘着还在调试模式，咱们来看一下这个变量的值；

它获取的中央是通过require引入的utils文件，这个文件的代码如下：

// 援用的代码，通过解构赋值的形式获取，而且还对这些变量进行了重命名
const { targets: allTargets, fuzzyMatchTarget } = require('./utils')

// utils 文件中的 targets 获取
const targets = (exports.targets = fs.readdirSync('packages').filter(f => {
    if (!fs.statSync(`packages/${f}`).isDirectory()) {
        return false
    }
    const pkg = require(`../packages/${f}/package.json`)
    if (pkg.private && !pkg.buildOptions) {
        return false
    }
    return true
}))

这里是通过fs.readdirSync来读取packages文件夹下的文件，而后通过filter过滤;

fs.readdirSync是同步读取文件夹下的文件，返回一个数组，数组中的每一项都是文件夹下的文件名

而后应用filter过滤不是文件夹的文件，而后再拿到这个文件夹中的package.json文件；

通过package.json文件中的private和buildOptions来判断是否是一个须要打包的文件夹，如果是的话，就将这个文件夹的名字增加到targets数组中；

通过下面的截图再比照一下源码的packages文件夹，能够看到targets数组中的每一项都是一个文件夹的名字，并且也晓得哪些文件是不须要打包的，比方sfc-playground工程并不是vue源码公布蕴含的局部，所以它是不须要打包的；

持续往下看，buildAll函数的代码如下：

async function buildAll(targets) {
  await runParallel(require('os').cpus().length, targets, build)
}

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

    if (maxConcurrency <= source.length) {
      const e = p.then(() => executing.splice(executing.indexOf(e), 1))
      executing.push(e)
      if (executing.length >= maxConcurrency) {
        await Promise.race(executing)
      }
    }
  }
  return Promise.all(ret)
}

buildAll函数只是包装了一下runParallel函数；

runParallel 并发执行

runParallel函数的作用是并发执行build函数，能够简略的看一下runParallel函数的代码；

这里的maxConcurrency是通过os.cpus().length获取的，也就是获取以后电脑的 CPU 外围数；

source就是targets数组，也就是packages文件夹下的文件夹名字；

iteratorFn就是build函数；

通过Promise.resolve()创立一个微工作的异步函数，而后将build函数放入then中期待执行；

而后将这个异步函数放入ret数组中，ret数组的作用是寄存所有的异步函数；

如果source的长度小于CPU的外围数，那么就间接应用Promise.all(ret)来并发执行所有的异步函数；

如果大于CPU的外围数，那么就极限施展多核的能力，上面就是要害代码：

if (maxConcurrency <= source.length) {
    // 对异步函数进行包装，包装的目标是在异步函数执行结束后，将这个异步函数从 executing 数组中移除
    const e = p.then(() => executing.splice(executing.indexOf(e), 1))
    
    // 将包装后的异步函数放入 executing 数组中
    executing.push(e)
    
    // 如果达到最大并发数，那么就期待一个异步函数执行结束，而后再执行下一个异步函数
    if (executing.length >= maxConcurrency) {
        // Promise.race 会在最先执行结束的异步函数执行结束后，将这个异步函数的执行后果
        await Promise.race(executing)
    }
}

这里的实现能够说是十分奇妙了，通过Promise.race来实现并发执行异步函数，而Promise.race的个性就是只有有一个异步函数执行结束，那么Promise.race就会有执行后果；

而在这些异步函数执行结束后，会将这些异步函数从executing数组中移除，这样就会空出一个地位，通过检测executing数组的长度，就能够晓得是否达到了最大并发数，这样就能够放弃最大并发数的异步函数在执行；

而这个代码的最初还是会调用一次Promise.all，这是因为Promise.race只能保障最先执行结束的异步函数执行结束，然而并不能保障所有的异步函数都执行结束，所以这里还是须要调用一次Promise.all来保障所有的异步函数都执行结束；

build 正式开始构建

下面的并发执行最终都是为了执行build函数，当初就来看看build函数的代码；

async function build(target) {
    // 获取以后构建的包的门路
    const pkgDir = path.resolve(`packages/${target}`)

    // 获取以后构建的包的 package.json
    const pkg = require(`${pkgDir}/package.json`)

    // if this is a full build (no specific targets), ignore private packages
    // 如果是全量构建，那么就疏忽公有包
    if ((isRelease || !targets.length) && pkg.private) {
        return
    }

    // if building a specific format, do not remove dist.
    // 如果是构建指定的格局，那么就不要删除 dist 目录
    if (!formats) {
        await fs.remove(`${pkgDir}/dist`)
    }

    // 构建指标生成的环境变量
    const env = (pkg.buildOptions && pkg.buildOptions.env) || (devOnly ? 'development' : 'production')

    // 执行 rollup 构建
    await execa(
        'rollup',
        [
            '-c',
            '--environment',
            [
                `COMMIT:${commit}`,
                `NODE_ENV:${env}`,
                `TARGET:${target}`,
                formats ? `FORMATS:${formats}` : ``,
                buildTypes ? `TYPES:true` : ``,
                prodOnly ? `PROD_ONLY:true` : ``,
                sourceMap ? `SOURCE_MAP:true` : ``
            ]
                .filter(Boolean)
                .join(',')
        ], {
            stdio: 'inherit'
        }
    )

    // if 外面的代码不会执行，因为执行 npm run build 的时候没有任何参数，所以上面的代码省略
    if (buildTypes && pkg.types) {
          // 这里次要是建构建类型申明文件
    }
}

build函数最终就是为了执行rollup命令；

这里的rollup命令是通过execa来执行的，execa是一个能够执行命令的库；

这里的execa的第一个参数就是要执行的命令;

第二个参数就是要传递给命令的参数;

第三个参数就是execa的配置，这里的stdio配置就是让execa的输入和rollup的输入保持一致；

关键点在于rollup命令的参数，而应用npm run build命令的时候，没有传递任何参数，所以formats、buildTypes、prodOnly、sourceMap都是undefined；

所以最终的rollup命令就是：

rollup -c --environment COMMIT:xxx,NODE_ENV:production,TARGET:xxx

rollup.config.js

既然最终执行的是rollup命令，那么就得走到rollup.config.js这个文件了；

下面逐行剖析的了sripts/build.js文件，这里就不再逐行剖析了，间接看整体的代码，逐行剖析的间接写在正文外面了；

// @ts-check
import { createRequire } from 'module'
import { fileURLToPath } from 'url'
import path from 'path'
import ts from 'rollup-plugin-typescript2'
import replace from '@rollup/plugin-replace'
import json from '@rollup/plugin-json'
import chalk from 'chalk'
import commonJS from '@rollup/plugin-commonjs'
import polyfillNode from 'rollup-plugin-polyfill-node'
import { nodeResolve } from '@rollup/plugin-node-resolve'
import terser from '@rollup/plugin-terser'

// 必须有 TARGET 参数
if (!process.env.TARGET) {
  throw new Error('TARGET package must be specified via --environment flag.')
}

// 创立 require 函数，import.meta.url 指向的是以后文件的门路
const require = createRequire(import.meta.url)
// 没有应用 node 自带的 __dirname，而是应用了 fileURLToPath 来获取以后文件的门路
const __dirname = fileURLToPath(new URL('.', import.meta.url))

// 获取 package 的版本号
const masterVersion = require('./package.json').version
// 模板引擎整合库
const consolidatePkg = require('@vue/consolidate/package.json')

// packages 目录门路
const packagesDir = path.resolve(__dirname, 'packages')
// 以后构建工程包的门路
const packageDir = path.resolve(packagesDir, process.env.TARGET)

// 简略封装一个 resolve 函数，不便前面应用
const resolve = p => path.resolve(packageDir, p)
// 通过 resolve 函数获取以后构建工程包的 package.json
const pkg = require(resolve(`package.json`))
// 以后构建工程包的 package.json 的 buildOptions 配置
const packageOptions = pkg.buildOptions || {}
// 工程名，通过  package.json 的 buildOptions 配置来的，如果没有就是工程的包名
const name = packageOptions.filename || path.basename(packageDir)

// ensure TS checks only once for each build
// 否则执行 ts 查看的标识，确保只会执行一次查看
let hasTSChecked = false

// 输入模块化的配置，蕴含了 cjs、esm、iife
const outputConfigs = {
  'esm-bundler': {
    file: resolve(`dist/${name}.esm-bundler.js`),
    format: `es`
  },
  'esm-browser': {
    file: resolve(`dist/${name}.esm-browser.js`),
    format: `es`
  },
  cjs: {
    file: resolve(`dist/${name}.cjs.js`),
    format: `cjs`
  },
  global: {
    file: resolve(`dist/${name}.global.js`),
    format: `iife`
  },
  // runtime-only builds, for main "vue" package only
  'esm-bundler-runtime': {
    file: resolve(`dist/${name}.runtime.esm-bundler.js`),
    format: `es`
  },
  'esm-browser-runtime': {
    file: resolve(`dist/${name}.runtime.esm-browser.js`),
    format: 'es'
  },
  'global-runtime': {
    file: resolve(`dist/${name}.runtime.global.js`),
    format: 'iife'
  }
}

// 默认的输入配置，对应下面的 outputConfigs
const defaultFormats = ['esm-bundler', 'cjs']
// 通过参数传递的构建包的格局，应用 npm run build 命令没有这个参数
const inlineFormats = process.env.FORMATS && process.env.FORMATS.split(',')
// 最终包构架的格局，优先应用参数传递的格局，其次应用 package.json 的 buildOptions.formats 配置，最初应用默认的格局
const packageFormats = inlineFormats || packageOptions.formats || defaultFormats
// 最终包构架的格局的配置，通过 packageFormats 过滤出 outputConfigs 中的配置
const packageConfigs = process.env.PROD_ONLY
  ? []
  : packageFormats.map(format => createConfig(format, outputConfigs[format]))

// 如果是生产环境，那么就增加一个生产环境的配置
if (process.env.NODE_ENV === 'production') {
  packageFormats.forEach(format => {
    // 如果 package.json 中的 buildOptions.prod 确定为 false，那么就不会增加生产环境的配置
    if (packageOptions.prod === false) {
      return
    }
    // cjs 的配置会减少的配置，通过 createProductionConfig 函数来创立
    if (format === 'cjs') {
      packageConfigs.push(createProductionConfig(format))
    }
    
    // 浏览器环境包减少的配置，通过 createMinifiedConfig 函数来创立
    if (/^(global|esm-browser)(-runtime)?/.test(format)) {
      packageConfigs.push(createMinifiedConfig(format))
    }
  })
}

// 导出 rollup 的配置
export default packageConfigs

function createConfig(format, output, plugins = []) {
    // ...
}

function createReplacePlugin(
  isProduction,
  isBundlerESMBuild,
  isBrowserESMBuild,
  isBrowserBuild,
  isGlobalBuild,
  isNodeBuild,
  isCompatBuild,
  isServerRenderer
) {
    // ...
}

function createProductionConfig(format) {
  // ...
}

function createMinifiedConfig(format) {
  // ...
}

下面的代码逐行给出了正文，这里就不再赘述，最终就是为了导出rollup的配置，这些配置最终长什么样子？咱们能够通过下面剖析build函数最初执行的命令来看看：

rollup -c --environment COMMIT:1fa3d95,NODE_ENV:production,TARGET:compiler-core

rollup 配置

通过下面的命名进去的配置长上面的样子，这里只展现了compiler-core包的配置，其余包的配置相似：

这里只是列出配置，不必看懂，只须要关怀input和output的配置，还有最终生成配置构造，因为我这里是间接导出的json，会导致函数解决局部的缺失。

[
  {
    "input": "C:\workspace\vue3-progress\core\packages\compiler-core\src\index.ts",
    "external": [
      "@vue/shared",
      "@babel/parser",
      "estree-walker",
      "source-map",
      "path",
      "url",
      "stream",
      "source-map",
      "@babel/parser",
      "estree-walker"
    ],
    "plugins": [
      {
        "name": "json"
      },
      {
        "name": "rpt2"
      },
      {
        "name": "replace"
      }
    ],
    "output": {
      "file": "C:\workspace\vue3-progress\core\packages\compiler-core\dist\compiler-core.esm-bundler.js",
      "format": "es",
      "exports": "named",
      "sourcemap": false,
      "externalLiveBindings": false
    },
    "treeshake": {
      "moduleSideEffects": false
    }
  },
  {
    "input": "C:\workspace\vue3-progress\core\packages\compiler-core\src\index.ts",
    "external": [
      "@vue/shared",
      "@babel/parser",
      "estree-walker",
      "source-map",
      "path",
      "url",
      "stream",
      "source-map",
      "@babel/parser",
      "estree-walker"
    ],
    "plugins": [
      {
        "name": "json"
      },
      {
        "name": "rpt2"
      },
      {
        "name": "replace"
      },
      {
        "name": "commonjs",
        "version": "23.0.2"
      },
      {
        "name": "node-resolve",
        "version": "15.0.1",
        "resolveId": {
          "order": "post"
        }
      }
    ],
    "output": {
      "file": "C:\workspace\vue3-progress\core\packages\compiler-core\dist\compiler-core.cjs.js",
      "format": "cjs",
      "exports": "named",
      "sourcemap": false,
      "externalLiveBindings": false
    },
    "treeshake": {
      "moduleSideEffects": false
    }
  },
  {
    "input": "C:\workspace\vue3-progress\core\packages\compiler-core\src\index.ts",
    "external": [
      "@vue/shared",
      "@babel/parser",
      "estree-walker",
      "source-map",
      "path",
      "url",
      "stream",
      "source-map",
      "@babel/parser",
      "estree-walker"
    ],
    "plugins": [
      {
        "name": "json"
      },
      {
        "name": "rpt2"
      },
      {
        "name": "replace"
      },
      {
        "name": "commonjs",
        "version": "23.0.2"
      },
      {
        "name": "node-resolve",
        "version": "15.0.1",
        "resolveId": {
          "order": "post"
        }
      }
    ],
    "output": {
      "file": "C:\workspace\vue3-progress\core\packages\compiler-core\dist\compiler-core.cjs.prod.js",
      "format": "cjs",
      "exports": "named",
      "sourcemap": false,
      "externalLiveBindings": false
    },
    "treeshake": {
      "moduleSideEffects": false
    }
  }
]

下面的没必要全看，简化后如下：

[
  {
    "input": "C:\workspace\vue3-progress\core\packages\compiler-core\src\index.ts",
    "output": {
      "file": "C:\workspace\vue3-progress\core\packages\compiler-core\dist\compiler-core.esm-bundler.js",
      "format": "es",
      "exports": "named",
      "sourcemap": false,
      "externalLiveBindings": false
    }
  },
  {
    "input": "C:\workspace\vue3-progress\core\packages\compiler-core\src\index.ts",
    "output": {
      "file": "C:\workspace\vue3-progress\core\packages\compiler-core\dist\compiler-core.cjs.js",
      "format": "cjs",
      "exports": "named",
      "sourcemap": false,
      "externalLiveBindings": false
    }
  },
  {
    "input": "C:\workspace\vue3-progress\core\packages\compiler-core\src\index.ts",
    "output": {
      "file": "C:\workspace\vue3-progress\core\packages\compiler-core\dist\compiler-core.cjs.prod.js",
      "format": "cjs",
      "exports": "named",
      "sourcemap": false,
      "externalLiveBindings": false
    }
  }
]

看到这些配置不难发现它们长的很想，input指向的都是同一个入口文件，不同的是output的file和format不同。

前端模块化

回头看看我这篇文章的题目，跟着Vue3来学习前端模块化，这里咱们曾经粗窥Vue3的模块化了;

下面生成的配置文件中有次要生成的esm和commonjs两种模块化的文件，先简略介绍下这两种模块化的区别：

esm：指的是es6出的模块化标准，它是js原生反对的模块化标准，它的特点是动静加载，能够在运行时加载模块，而且能够通过import()动静加载模块，它的长处是能够按需加载，缩小了打包后的文件体积；
commonjs：指的是node出的模块化标准，它的特点是动态加载，只能在编译时加载模块，而且只能通过require()加载模块，它的长处是能够同步加载，不须要思考加载程序；
iife：指的是IIFE模块化标准，它的特点是动态加载，只能在编译时加载模块，而且只能通过script标签加载模块，它的长处是能够同步加载，不须要思考加载程序；

这里补上iife的模块化的简短阐明，这里就不具体介绍，网上有很多对于前端模块化的文章，感兴趣能够自行查阅。

咱们来看看生成的这三个文件的区别：

compiler-core.cjs.js

compiler-core.cjs.prod.js

compiler-core.esm-bundler.js

模块化的标准不同的方面就不多说了，最直观的了解就是导入和导出的形式不同，esm是import导入，commonjs是require导入，iife是script标签导入。

而通过下面的三个文件的比照，间接看defaultOnWarn函数的区别：

compiler-core.cjs.js：defaultOnWarn函数是间接应用console.warn打印内容的；
compiler-core.cjs.prod.js：defaultOnWarn函数外面是空的，没有任何内容；
compiler-core.esm-bundler.js：defaultOnWarn函数多了一个环境检测，如果是process.env.NODE_ENV !== 'production'就不打印内容；

这一部分就是通过rollup.config.js中的createReplacePlugin函数生成的，来看看这个函数的实现：

function createReplacePlugin(
  isProduction,
  isBundlerESMBuild,
  isBrowserESMBuild,
  isBrowserBuild,
  isGlobalBuild,
  isNodeBuild,
  isCompatBuild,
  isServerRenderer
) {
  // 替换的关键字和内容对象的映射
  const replacements = {
    __COMMIT__: `"${process.env.COMMIT}"`,
    __VERSION__: `"${masterVersion}"`,
    __DEV__: isBundlerESMBuild
      ? // preserve to be handled by bundlers
        `(process.env.NODE_ENV !== 'production')`
      : // hard coded dev/prod builds
        !isProduction,
    // this is only used during Vue's internal tests
    __TEST__: false,
    // If the build is expected to run directly in the browser (global / esm builds)
    __BROWSER__: isBrowserBuild,
    __GLOBAL__: isGlobalBuild,
    __ESM_BUNDLER__: isBundlerESMBuild,
    __ESM_BROWSER__: isBrowserESMBuild,
    // is targeting Node (SSR)?
    __NODE_JS__: isNodeBuild,
    // need SSR-specific branches?
    __SSR__: isNodeBuild || isBundlerESMBuild || isServerRenderer,

    // for compiler-sfc browser build inlined deps
    ...(isBrowserESMBuild
      ? {
          'process.env': '({})',
          'process.platform': '""',
          'process.stdout': 'null'
        }
      : {}),

    // 2.x compat build
    __COMPAT__: isCompatBuild,

    // feature flags
    __FEATURE_SUSPENSE__: true,
    __FEATURE_OPTIONS_API__: isBundlerESMBuild ? `__VUE_OPTIONS_API__` : true,
    __FEATURE_PROD_DEVTOOLS__: isBundlerESMBuild
      ? `__VUE_PROD_DEVTOOLS__`
      : false,
    ...(isProduction && isBrowserBuild
      ? {
          'context.onError(': `/*#__PURE__*/ context.onError(`,
          'emitError(': `/*#__PURE__*/ emitError(`,
          'createCompilerError(': `/*#__PURE__*/ createCompilerError(`,
          'createDOMCompilerError(': `/*#__PURE__*/ createDOMCompilerError(`
        }
      : {})
  }
  // allow inline overrides like
  //__RUNTIME_COMPILE__=true yarn build runtime-core
  Object.keys(replacements).forEach(key => {
    if (key in process.env) {
      replacements[key] = process.env[key]
    }
  })
    
  // replace 插件，用于替换代码中的关键字，由 rollup-plugin-replace 提供
  return replace({
    // @ts-ignore
    values: replacements,
    preventAssignment: true
  })
}

能够先把下面的代码简化一下：

function createReplacePlugin(isBundlerESMBuild) {
    // 替换的关键字和内容对象的映射
    const replacements = {
        __DEV__: isBundlerESMBuild
            ? // 工程化打包解决机制
            `(process.env.NODE_ENV !== 'production')`
            : // 硬编码 dev/prod 构建形式
            !isProduction,
    }
    
    // 能够通过命令参数笼罩
    //__RUNTIME_COMPILE__=true yarn build runtime-core
    Object.keys(replacements).forEach(key => {
        if (key in process.env) {
            replacements[key] = process.env[key]
        }
    })

    return replace({
        values: replacements,
        preventAssignment: true
    })
}

这个函数的次要作用就是生成replacements对象，这个对象就是用来替换代码中的关键字的，比方__DEV__就是用来替换代码中的__DEV__关键字的，这个关键字在vue的代码中是这样应用的：

if (__DEV__) {
  // do something
}

而这个关键字依据下面三个输入文件来看：

compiler-core.cjs.js：__DEV__为true；

compiler-core.cjs.prod.js：__DEV__为false；

compiler-core.esm-bundler.js：__DEV__为process.env.NODE_ENV !== 'production'；

而依据不同的替换值，最终生成的代码也不雷同，就比方下面的示例。

参考：https://github.com/rollup/plugins/tree/master/packages/replace

场景适配

通过下面的配置能够看到，vue中应用这种形式的变量有十分多，而__DEV__只是其中的一种，也是咱们最为相熟的一种；

而__DEV__的作用就是用来判断以后的环境是开发环境还是生产环境，同时还会思考各种环境的适配，就比方下面的三个文件：

compiler-core.cjs.js：这个文件是commonjs标准的，通常是提供给node环境应用的，所以__DEV__的值为true，这样就能够在开发环境下输入一下外部的日志信息，不便开发者调试；
compiler-core.cjs.prod.js：这个文件也是commonjs标准的，文件名中带有.prod，通常是在生产环境下应用的，所以__DEV__的值为false，在生产环境下移除掉一些外部的日志信息，缩小打包体积；
compiler-core.esm-bundler.js：这个文件是esm标准的，通常是提供给webpack、vite等打包工具应用的，所以__DEV__的值为process.env.NODE_ENV !== 'production'，这样就给这些打包工具提供了一种解决机制，让打包工具来决定是否移除；

除了上述的这两种打包计划，vue还提供了一种iife的打包计划，这种打包计划通常是用来在浏览器环境下应用的;

在这种计划下__DEV__的值会是什么呢？而最终生成的文件和下面的两种有什么区别呢？这里就留给感兴趣的同学本人动动手，编译一下vue，输入一些日志信息，看看最终生成的文件有什么区别。

总结

通过剖析vue源码的package.json的scripts配置，咱们理解到vue是通过nodejs的execa包，对rollup的命令进行了封装，从而实现了对rollup的命令和配置动态化；

execa是基于child_process的封装，能够让咱们更加不便的执行命令，vue利用这个个性，应用多线程的形式，同时执行多个rollup命令，从而放慢了打包速度；

rollup的配置文件是通过rollup.config.js来进行配置的，而vue通过各种参数的封装，实现了对rollup配置的动态化，从而实现了对不同的打包计划的适配；

思考到vue可能会在不同的环境下运行，vue通过配置rollup的output.format参数，能够实现对不同的打包计划的适配，比方cjs、esm、iife等，从而实现对浏览器环境、node环境、webpack、vite等打包工具的适配；

思考到产物最终可能须要辨别开发环境和生产环境，vue通过配置rollup的replace插件，能够实现对__DEV__的动静替换，从而实现对开发环境和生产环境的适配；

宣传

这是我写的对于vue3源码系列的第一章，从打包开始，前面的章节会一步步深刻到vue3的源码中，逐渐理解vue3的实现原理；

目前的节奏筹备是一周一篇，学习趋势是前面会跟着官网的api文档，看看每个api前面是怎么实现的，下一篇文章会就是正式开始，从createApp开始，也是咱们应用vue3的入口；

集体也不晓得大家更能承受什么形式了解源码，而后这篇文章第一局部逐行剖析scripts/build.js的代码，第二局部是对rollup.config.js的间接剖析，不晓得大家更能承受那种形式；

本人当初也是在学习vue3的源码，可能会有一些谬误或者了解不到位的中央，欢送大家斧正，也欢送大家一起来学习，一起来交换，一起来提高；

目前也创立了一个群提供一个平台，大家有什么倡议或者问题都能够在群里提出来，一起来探讨，一起来提高，点击退出群聊一起独特成长提高。

关于前端:源码库跟着-Vue3-学习前端模块化

筹备工作

源码 clone

环境筹备

Vue3 模块化计划

scripts/build.js

runParallel 并发执行

build 正式开始构建

rollup.config.js

rollup 配置

前端模块化

场景适配

总结

宣传

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:源码库跟着-Vue3-学习前端模块化

筹备工作

源码 clone

环境筹备

Vue3 模块化计划

scripts/build.js

runParallel 并发执行

build 正式开始构建

rollup.config.js

rollup 配置

前端模块化

场景适配

总结

宣传

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复