前言

将项目中的公共utils方法提取出来，单独打包发布到npm，可以在各项目中直接引入包使用。

1. 技术选型

• Vue3
• Typescript
• Rollup // 轻量级的打包工具，适合用于打包库文件

  2.环境搭建

  # -y表示略过所有问答，全部按照yes选项生成
  yarn init -y
  # 或者用npm
  npm init -y

  3. 安装依赖

  ```shell

  安装rollup及其他核心依赖

  yarn add rollup -D yarn add @babel/core -D yarn add rollup-plugin-node-resolve @rollup/plugin-babel @rollup/plugin-commonjs -D yarn add rollup-plugin-vue @vue/compiler-sfc -D

安装rollup-plugin-typescript2能让rollup打包ts文件

yarn add rollup-plugin-typescript2 -D

安装vue3

yarn add vue@next

安装ts

yarn add typescript

<a name="IUt3F"></a>
### 4. package.json添加脚本命令
```json
{
  "name": "smart-utils",
  "version": "1.0.0",
  "main": "dist/bundle.esm.js", // 包的入口文件，如果未指定默认是根目录下的index.js
  "types": "dist/index.d.ts", // 定义类型声明入口文件
  "repository": "your git repository",
  "author": "your name",
  "license": "MIT",
  "scripts": {
    "build": "rollup -c" // -c 表示使用rollup config配置文件
  },
  "dependencies": {
    "typescript": "^4.5.5",
    "vue": "^3.2.31"
  },
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@rollup/plugin-babel": "^5.3.1",
    "@rollup/plugin-commonjs": "^21.0.2",
    "@vue/compiler-sfc": "^3.2.31",
    "rollup": "^2.68.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript2": "^0.31.2",
    "rollup-plugin-vue": "^6.0.0"
  }
}

5. 编写入口文件

smart-utils
├─ src        
   ├── utils
        ├── index.ts
   ├── index.ts  /入口文件
   └── ...

// index.ts
export * from './src/utils/index'

6. 根目录创建rollup配置文件 rollup.config.js

import resolve from "rollup-plugin-node-resolve"
import vue from "rollup-plugin-vue"
import babel from "@rollup/plugin-babel"
import commonjs from "@rollup/plugin-commonjs"
import typescript from 'rollup-plugin-typescript2'
// import { terser } from 'rollup-plugin-terser';
import {name} from './package.json'
const mode = process.env.MODE;
const isProd = mode === 'prod';
const extensions= ['.js', '.ts', '.vue']
const config = {
  input: "./main.ts", // 必须，入口文件
  output: [{ // 必须 (如果要输出多个，可以是一个数组)
    file: 'dist/bundle.esm.js',
    name,
    format: 'esm', // es module形式
  }, {
    file: 'dist/bundle.cjs.js',
    name,
    format: 'cjs' // CommonJS，适用于 Node 和 Browserify/Webpack
  }],
  external: ['element-plus', 'vue'], // 剔除项，指出应将哪些模块视为外部模块，视为外部模块的模块不会打包进去
  plugins: [
    resolve({ extensions, browser: true}), // rollup-plugin-node-resolve插件可以告诉 Rollup 如何查找外部模块
    vue({
      css: true,
      compileTemplate: true
    }),
    babel({
      exclude: "**/node_modules/**"
    }),
    typescript(),
    commonjs(), // rollup-plugin-commonjs 插件用来将 CommonJS 转换成 ES2015 模块
    // terser() // 用于代码压缩，根据实际情况选用
  ]
}
export default config

7. 新建ts编译配置文件tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "moduleResolution": "node",
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "skipLibCheck": true,
    "declaration": true, // 生成类型声明文件
    "declarationDir": "dist", // 生成类型声明文件的目录
    "paths": {
      "*": ["types/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

8. 打包

yarn build

9. 登录npm， 发布包

# 登录
npm login
# 发布
npm publish

进行到这里一份简单的rollup打包流程已经跑通了，可以在项目里安装刚发布的包并进行引用了。

tips1： 在调试过程中发现每次修改内容都需要修改包的版本号然后发布，然后再在项目中引入测试，这样比较麻烦，我们可以采用npm link的方式解决。

在开发的包中执行命令： npm link
在需要引入该包的项目中执行：npm link [包名] 并启动项目就可以实时进行调试测试

tips2：想要升级包版本的时候可以使用命令自动升级

# 假设当前version: 1.0.0
# 提示主版本号，version 变为2.0.0
npm version major 
# 提升次版本号，version 变为1.1.0
npm version minor 
# 提升补丁号，version 变为1.0.1
npm version patch