Vue3脚手架实现（十一、打包项目）我们准备使用gulp + rollup 进行打包处理安装包我们先安装对应的包，里

我们准备使用gulp + rollup 进行打包处理

安装包

我们先安装对应的包，里面除了@esbuild-kit/cjs-loader和@tsconfig/node22，我们在第一期都有所介绍

npm install gulp rollup @rollup/plugin-commonjs @rollup/plugin-json @rollup/plugin-node-resolve @rollup/plugin-typescript @esbuild-kit/cjs-loader @tsconfig/node22 -D

直接看官方说明，@esbuild-kit/cjs-loader 这个包的用处就是

gulp文档打开一下先，看下说明。基本可以确定@esbuild-kit/cjs-loader用来帮助我们识别import/export语法以及加载ts的gulp文件

tsconfig.json：相关的配置说明这里不做过多叙述，有关配置含义可以去查询。@tsconfig/node22 已经给我们提供了一个基础的node22的环境配置。

{
  "extends": "@tsconfig/node22/tsconfig.json",
  "include": ["index.ts", "utils/**/*"],
  "compilerOptions": {
    "rootDir": "./",
    "strict": false,
    "resolveJsonModule": true,
    "moduleResolution": "Bundler",
    "module": "ESNext"
  }
}

build\index.ts

清理任务 (clean)：清理dist文件。这个cb的函数是通知任务完成的回调，没有会报错。
copyTemplate和copyPackageJson就是复制一下模板目录和package.json。对于dot配置项，Gulp 会忽略以 . 开头的文件和目录（比如 .gitignore、.env、.config/ 等）；启用 dot: true强制 Gulp 包含这些点文件/目录
build任务就是先执行clean任务，然后并行执行compileTs、copyTemplate、copyPackageJson这三个任务
compileTs就是打包ts的任务，这里使用的rollup来进行打包。针对rollup的配置见后面
- file：输出文件路径
- format: 'es' ：输出格式为 ES Modules (ESM)
- sourcemap: true：生成 .map 文件，便于调试

import gulp from 'gulp'
import path from 'path'
import fs from 'fs-extra'
import { rollup } from 'rollup'
import rollupConfig from './rollup.config'

import { outDir, outCreateJqqDir, outTemplateDir } from './path'

// 清理 dist
export function clean(cb) {
  if (fs.existsSync(outDir)) {
    fs.removeSync(outDir)
    cb()
  }
  cb()
}

export async function compileTs() {
  const bundle = await rollup(rollupConfig)
  await bundle.write({
    file: path.resolve(outCreateJqqDir, 'index.mjs'),
    format: 'es',
    sourcemap: true,
  })
}
export function copyTemplate() {
  return gulp.src(['../template/**/*'], { dot: true }).pipe(gulp.dest(outTemplateDir))
}
export function copyPackageJson() {
  return gulp.src(['../package.json']).pipe(gulp.dest(outCreateJqqDir))
}

export const build = gulp.series(clean, gulp.parallel(compileTs, copyTemplate, copyPackageJson))

export default build

build\path.ts：这里面封装暴露出各个路径

import { fileURLToPath } from 'url'
import { dirname } from 'path'
import path from 'path'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

export const outDir = path.resolve(__dirname, '../dist')
export const outCreateJqqDir = path.resolve(outDir, 'create-jqq')
export const outTemplateDir = path.resolve(outCreateJqqDir, 'template')

build\rollup.config.ts：这个是rollup的配置
- @rollup/plugin-typescript
  让 Rollup 直接处理 TypeScript 文件
- @rollup/plugin-json
  允许直接导入 JSON 文件（如 import packageJson from './package.json'）中我们导入的json文件
- @rollup/plugin-node-resolve
  解析第三方依赖（从 node_modules 中查找模块），如果没有这个包打包出来就是这个效果。preferBuiltins: true就是优先使用 Node.js 内置模块而非 npm 包中的同名模块。
- @rollup/plugin-commonjs
  将 CommonJS 模块转换为 ES 模块（处理非 ESM 的 npm 包）。去掉的话会因为模块问题报错
```
import typescript from '@rollup/plugin-typescript'
import json from '@rollup/plugin-json'
import { nodeResolve } from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'

export default {
  input: '../index.ts',
  plugins: [
    nodeResolve({
      preferBuiltins: true,
    }),
    commonjs(),
    typescript({ tsconfig: '../tsconfig.json' }),
    json(),
  ],
}
```
.gitignore增加dist的忽略
```
node\_modules
jqq
dist
```
package.json我们手动增加配置，一个是package.json这里的create-jqq命令要让他去找打包后的index.mjs，我们打包之后是这个文件。build就是我们的打包命令。
```
{
  "bin": {
    "create-jqq": "./index.mjs"
  },
  "scripts": {
    "build": "gulp --require ./node_modules/@esbuild-kit/cjs-loader -f ./build/index.ts",
  },
}
```