pnpm + rollup + Vue2 封装 ECharts 组件

云浪
726 阅读2分钟

最近一直在学习 ECharts 相关的东西，所以出于学习的目的便参考 vue-echarts 自己封装了一个。

pnpm 是一个非常好用的包管理工具，利用它可以非常方便地搭建一个多包的仓库。只要在项目的 pnpm-workspace.yaml 定义好相关 workspace 即可。

packages:
  - packages/*
  - play

整个项目的目录结构如下：

1.png

play 项目是直接使用 Vue Cli 生成的，组件的名字是 spring-echarts ，由于使用了多包管理，要在本地调试 spring-echarts 组件非常方便，只要在 play 项目安装一下 spring-echarts 即可。

 pnpm i spring-echarts --filter play

只要在项目的根目录下运行上面的命令，就可以把 spring-echarts 包安装到 play 中，然后会在 play 的 package.json 下面看到：

2.png

当 spring-echarts 的代码更新以后，会自动地同步到 play 项目中。

pnpm 可以从 .npmrc 获取配置信息，具体的配置如下：

shell-emulator=true
shamefully-hoist=true

当 shell-emulator 设置为 true 时，pnpm 将使用类 bash shell 的 JavaScript 实现来执行脚本。

此选项简化了跨平台脚本。 例如，默认情况下，下面脚本将在非 POSIX 兼容系统上失败：

"scripts": {
  "test": "NODE_ENV=test node test.js"
}

但是，如果 shell-emulator 设置为 true，它可以在所有平台运行。参考pnpm run | pnpm

shamefully-hoist 设置为 true 可以提升依赖项到根目录的 node_modules 。因为某些依赖项需要提升到根目录的 node_modules 下才生效，比如 gulp 。参考 .npmrc | pnpm

本人在根目录的 package.json 下定义了如下 npm scripts 命令

"scripts": {
  "build": "pnpm run -C packages/spring-echarts build",
  "dev:spring-echarts": "pnpm run -C packages/spring-echarts dev",
  "build:play": "pnpm -C play build",
  "dev": "pnpm -C play serve"
}

Rollup 也是一个非常好用的打包工具，这里为了区分环境，本人分了两个 rollup 的配置文件，分别对于开发环境和正式环境。

rollup.config.prod.mjs 配置如下：

import vue from "rollup-plugin-vue";
import terser from "@rollup/plugin-terser";

export default {
  input: "src/Echarts.vue",
  output: {
    file: "dist/spring-echarts.js",
    format: "es",
  },
  external: ["echarts", "lodash/debounce", "resize-detector"],
  plugins: [vue(), terser()],
};

rollup.config.dev.mjs 配置如下：

import vue from "rollup-plugin-vue";

export default {
  input: "src/Echarts.vue",
  output: {
    file: "dist/spring-echarts.js",
    format: "es",
  },
  external: ["echarts", "lodash/debounce", "resize-detector"],
  watch: {
    include: "src/**",
    exclude: "node_modules/**",
  },
  plugins: [vue()],
};

可以发现相关配置非常地简单，开发环境多了 watch 相关的配置，正式环境则使用了压缩代码相关的插件 @rollup/plugin-terser。

注意，在 spring-echarts 中的 package.json 中要配置好 exports ，否则其他项目在引入 spring-echarts 组件的时候会无法找到 spring-echarts 组件，具体可见 Modules: Packages | Node.js v19.8.1 Documentation

"exports": {
  ".": {
    "import": "./dist/spring-echarts.js"
  }
}

组件开发完成后，最后的步骤就是发包，发包的命令也很简单：

pnpm publish packages/spring-echarts

关于 pnpm publish 的用法可以参考 pnpm publish | pnpm

具体的组件源码地址 spring-echarts

avatar
文章
阅读
粉丝