模块打包

0.1

0.1

修改 package.json 文件

新增 dev 脚本，运行 script/dev.js 文件，后面跟上要打包的模块的名称，-f 表示打包的格式，global 是值，表示全局打包，-s 表示开启 sourcemap

{
  "name": "vue3-resource",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "dev": "node script/dev.js reactivity -f global -s"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@rollup/plugin-commonjs": "^21.0.1",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": "13",
    "execa": "4",
    "minimist": "^1.2.7",
    "rollup": "^2.79.1",
    "rollup-plugin-typescript2": "^0.34.1",
    "typescript": "^4.9.4"
  }
}

dev.js 文件

新建 script/dev.js 文件，文件内容如下

const minimist = require('minimist')
const execa = require('execa')

// 拿到 package 中 script 中配置的自定义参数
const args = minimist(process.argv.slice(2))
// 打包的模块
const target = args._.length ? args._[0] : 'reactivity'
// 是否是全局打包
const formats = args.f || 'global'
// 是否开启 sourcemap
const sourcemap = args.s || false

// 开启一个子进程，使用 rollup 打包，会使用 rollup.config.js 配置文件中的内容
execa(
  'rollup', [
    // 参数， --watch --config
    '-wc',
    // 配置环境变量，下面的数组是环境变量的值，环境变量的格式是 'a:b'，所以要将数组转换成上面的格式
    '--environment',
    [
      `TARGET:${target}`,
      `FORMATS:${formats}`,
      sourcemap ? `SOURCEMAP:${sourcemap}` : ''
    ].filter(Boolean).join(',')
  ],
  {
    // 表示这个子进程的输出是在当前的命令行中输出
    stdio: 'inherit'
  }
)

rollup.config.js 文件

在 dev.js 中使用 rollup 打包的时候，会自动读取 rollup.config.js 配置文件中的内容，所以新建该文件，同时内容如下：

import path from 'path'
import ts from 'rollup-plugin-typescript2'
import json from '@rollup/plugin-json'
import commonjS from '@rollup/plugin-commonjs'
import nodeResolve from '@rollup/plugin-node-resolve'

// 打包的格式
const packageFormats = process.env.FORMATS && process.env.FORMATS.split(',')
// 是否开启 sourcemap
const sourcemap = process.env.SOURCEMAP
// 打包的模块
const target = process.env.TARGET

// 找到 packages 目录
const __dirname = path.resolve();
const packagesDir = path.resolve(__dirname, 'packages')
// 根据 target 来找到打包的模块目录
const packageDir = path.resolve(packagesDir, target)
// 找到要打包的模块的名字
const name = path.basename(packageDir)

// 找到要打包的模块下的 package.json 文件
const resolve = p => path.resolve(packageDir, p)
const pkg = require(resolve('package.json'))

// 打包的三种格式
const outputConfigs = {
  'esm-bundler': {
    file: resolve(`dist/${name}.esm-bundler.js`),
    format: 'es'
  },
  'cjs': {
    file: resolve(`dist/${name}.cjs.js`),
    format: 'cjs'
  },
  'global': {
    file: resolve(`dist/${name}.global.js`),
    format: 'iife'
  }
}

const packageConfig = packageFormats || pkg.buildOptions.formats

const createConfig = (format, output) => {
  // 添加 sourcemap
  output.sourcemap = sourcemap
  // 打包的时候，需要命名
  output.exports = 'named'
  // 指定外部模块中哪些模块不需要打包
  let external = [];
  if (format === 'global') {
    // 当是全局打包的时候，需要给一个全局的名字
    output.name = pkg.buildOptions.name
  } else {
    external = [...Object.keys(pkg.dependencies)]
  }
  return {
    input: resolve('src/index.ts'),
    output,
    external,
    plugins: [
      json(),
      ts(),
      commonjS(),
      nodeResolve()
    ]
  }
}
// rollup 要求返回一个默认的对象或数组
// 这里返回一个数组，进行依次打包
export default packageConfig.map(format => createConfig(format, outputConfigs[format]))

开始打包

使用 pnpm run dev 命令进行打包，按照上面的配置的话，只会打包出来 global 全局的文件，如果想要 global，cjs，esmodule 格式的文件都打包的话，则可以将 rollup.config.js 文件中 const packageConfig = packageFormats || pkg.buildOptions.formats 修改为 const packageConfig = pkg.buildOptions.formats，此时则会去找模块下 package.json 文件中的 buildOptions 下的 formats 的值