【九月打卡】第15天 本地测试我们打包的组件

课程名称：web前端架构师

课程章节：第13周 第四章

主讲老师：张轩

课程内容：本地测试我们打包的组件

在使用 rollup 打包组件时，当我们使用第三方模块时，如果我们还没有做任何处理，就会出现下面警告

(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
vue (imported by src/App.vue?vue&type=script&setup=true&lang.ts, src/components/HelloWorld.vue?vue&type=script&setup=true&lang.ts)
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
vue (guessing 'vue')

这个警告信息提示我们去查看 https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency

查看后，我们知道如果想要将vue 文件打包进去，我们需要安装 @rollup/plugin-node-resolve

pnpm i @rollup/plugin-node-resolve -D

加上后，我们发现打包后的文件比之前大了不少，这是因为 rollup 把我们是使用第三方模块的方法也打包进去了，尽管代码已经进行了 tree-shaking 了。我们需要先了解 npm 依赖

npm 依赖分类

dependencies

运行项目业务逻辑需要依赖的第三方库
npm install ‘模块名称’ 的时候都会被解析，下载

devDependencies

开发模式工作流下依赖的第三方库
单元测试，语法转换，lint 工具，程序构建，本地开发 等等

peerDependencies

需要核心依赖库，不能脱离依赖库单独使用

我们可以将我们组件使用的第三方模块放到 peerDependencies。rollup 中 external 可以表示哪些外部依赖， Rollup 只会解析，并不会导入

// rollup.config.js
export default {
  external: ['vue'],
}

生成两种格式的文件

我们组件会生成 esm 和 umd 两种格式

首先我们需要将公用的配置文件提取出来

公用配置文件

import vue from 'rollup-plugin-vue'
import typescript from 'rollup-plugin-typescript2'
import img from '@rollup/plugin-image'
import autoprefixer from 'autoprefixer'
import postcss from 'rollup-plugin-postcss'
import { nodeResolve } from '@rollup/plugin-node-resolve'

const overrides = {
  compilerOptions: {
    declaration: true
  },
  exclude: ['src/App.vue', 'src/components/HelloWorld.vue']
}
export const file = type => {
  return `dist/bundle.${type}.js`
}
export const output = {
  name: 'App'
}
export default {
  input: './src/main.ts',
  external: ['vue'],
  plugins: [
    vue(),
    typescript({
      tsconfigOverride: overrides
    }),
    img(),
    nodeResolve(),
    postcss({
      plugins: [autoprefixer()],
      extract: true
    })
  ]
}

处理 esm

import baseConfig, { file, output } from './rollup.config'
export default {
  ...baseConfig,
  output: {
    ...output,
    format: 'esm',
    file: file('esm')
  }
}

处理 umd

打包生成 umd 格式的文件时，会出现警告信息

(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
vue (guessing 'vue')

umd 格式外部依赖都是全局变量，我们这里没有设置全局变量的名称，所以出现这个警告，我们需要告诉rollup 全局变量的名称，通过 globals 进行设置

import baseConfig, { file, output } from './rollup.config'
export default {
  ...baseConfig,
  output: {
    ...output,
    format: 'umd',
    file: file('umd'),
    globals: {
      vue: 'Vue'
    },
    exports: 'named'
  }
}

打包命令配置

我这里使用了 npm-run-all 这个模块帮我们一键执行多个命令

pnpm i npm-run-all

{
  "scripts": {
    "build:esm": "rollup --config build/rollup.esm.js",
    "build:umd": "rollup --config build/rollup.umd.js",
    "build": "rm -rf dist && npm-run-all build:*"
  },
}

使用npm-link 测试本地

首先需要修改我们组件的 package.json 文件

• main common js 入口文件
• module 当我们使用 esm 导入文件时的入口文件
• types ts 类型文件

{
  "main": "dist/bundle.umd.js",
  "module": "dist/bundle.esm.js",
  "types": "dist/main.d.ts"
}

修改后执行 npm link

npm link

在需要引入的项目中执行 npm link + 模块名进行测试

npm link test-app

然后就可以在本地项目中导入测试使用我们的组件了