将我的BaseEcharts上传到npm

晴天蜗牛不一般
173 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

前言：前段时间写过一个共用的echarts组件，用于可视化开发方便了很多，后来同事也拿去用，让我觉得小有成就感，但是在用的过程中发现了一些问题，首先就是js文件不停的传来传去，引来引去不太方便，于是花了大半天时间捣鼓了一下怎么上传npm，这里分享一下我的踩坑过程

一 组件开发：这里和我们正常的开发组件没有任何不同，但是接下来我有个需求希望上传npm一个样式主题，这里暂时还不清楚怎么搞，有待研究

1.首先在src目录下新建一个package的文件夹（这一步在哪里建什么名字的文件夹不是很重要，只要在后面的配置写对对应路径就可以）
2. 新建base-echarts文件夹，下面存放组件 index.vue及相关js

image.png

package
    base-echarts
        index.vue //代码逻辑文件
        tooltip-auto-show-vue.js // echarts悬浮框轮播js
    export.js  // 入口文件

3.入口文件配置：

import BaseEcharts from './base-echarts/index.vue'
const coms = [BaseEcharts];

//批量组件注册
const install = function (Vue) {
  coms.forEach((com) => {
     Vue.component(com.name,com)
  })
}
// export default install 
/*这种方式对外暴露 需要在main.js import { BaseEcharts } from 'base-echarts' 引入后
以 app.use(BaseEcharts) 全局挂载调用*/
export { install, BaseEcharts }
/* 这样既可以在单独的vue文件中 以 import { BaseEcharts } from 'base-echarts' 引入后直接使用，
 也可以在main.js 中 import { install } from 'base-echarts'，使用app.use(install) 全局挂载调用*/

二 配置vite.config.js文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: "base-echarts", //输出文件名称
    lib: {
      entry: resolve(__dirname, "./src/package/index.js"), //指定组件编译入口文件
      name: "base-echarts",
      fileName: "base-echarts",
    }, //库编译模式配置
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ["vue"],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: "Vue",
        },
      },
    }, // rollup打包配置
  },
})

三 配置package.json文件

{
  "name": "base-echarts"
  "version": "1.1.7",
  "type": "module", 
  "description": "带轮播的echarts共用组件",
  "module": "./base-echarts/base-echarts.js",
  "main": "./base-echarts/base-echarts.umd.cjs",
  "files": [
    "base-echarts"
  ],
  "exports": {
    ".": {
      "import": "./base-echarts/base-echarts.js",
      "require": "./base-echarts/base-echarts.umd.cjs"
    }
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "keywords": [
    "echarts",
    "BaseEcharts"
  ],
  "author": {
    "name": "louiszhangsan",
    "email": "zyqwai7@163.com",
    "url": "https://juejin.cn/user/571401778506519"
  },
  "dependencies": {
    "base-echarts": "^1.1.7",
    "echarts": "^5.3.3",
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.1",
    "vite": "^3.0.4"
  }
}

注意

  1. 版本每更新一次，version 版本号要改一下
  2. 如果 package.json 不包含 "type": "module"，Vite 会生成不同的文件后缀名以兼容 Node.js。.js 会变为 .mjs 而 .cjs 会变为 .js.
  3. keywords 设置npm网站中搜索到该库的关键词
  4. 推荐在package.json中使用如下格式：具体查看 vite文档库模式
{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.umd.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    }
  }
}

四 README.md

编写所开发库的文档，介绍给用户

五 上传npm

  1. 上传前进行打包 npm run build image.png
  2. 官网注册npm账号，官网在这里

image.png

  1. 设置npm源，如果采用的淘宝镜像源或其他的需要切换为官方的 命令如下
npm config set registry=https://registry.npmjs.org

  1. 登录到npm 打包后的文件根目录打开终端，输入 npm login，依次输入 用户名，密码 image.png 邮箱需要输入验证码，出现这个即登录成功 image.png

  2. 上传npm 输入 npm publish，出现下图上传成功 image.png

六 下载npm

npm上传仓库后，即可下载使用 npm i base-echarts，成就感+1

总结

不要轻易删除任何一个已上传npm的包

avatar
文章
阅读
粉丝