我们已经可以使用rollup开发我们的vue组件库，现在我们把我们开发的文件打包发布到npm上

补全package信息

之前我们的信息不完整，现在补全

  1. {
  2.   "name": "ynzy_rollup_test",
  3.   "version": "1.0.0",
  4.   "main": "index.js",
  5.   "license": "MIT",
  6.   "module": "dist/datav.es.js",
  7.   "browser": "dist/datav.js",
  8.   "author": "ynzy",
  9.   "homepage": "https://github.com/ynzy/rollup_test",
  10.   "scripts": {
  11.     "dev": " rollup -wc rollup.config.js --environment NODE_ENV:development ",
  12.     "build": "rollup -c rollup.config.js --environment NODE_ENV:development ",
  13.     "build:prod": "rollup -c rollup.config.js --environment NODE_ENV:production"
  14.   },
  15.   "devDependencies": {
  16.     "@babel/core": "^7.12.3",
  17.     "@babel/plugin-transform-flow-strip-types": "^7.12.1",
  18.     "@babel/preset-env": "^7.12.1",
  19.     "@vue/compiler-sfc": "^3.0.2",
  20.     "cross-env": "^7.0.2",
  21.     "rollup": "^2.33.1",
  22.     "rollup-plugin-babel": "^4.4.0",
  23.     "rollup-plugin-commonjs": "^10.1.0",
  24.     "rollup-plugin-json": "^4.0.0",
  25.     "rollup-plugin-node-resolve": "^5.2.0",
  26.     "rollup-plugin-postcss": "^3.1.8",
  27.     "rollup-plugin-terser": "^7.0.2",
  28.     "rollup-plugin-vue": "^6.0.0-beta.11",
  29.     "sass": "^1.29.0"
  30.   },
  31.   "dependencies": {},
  32.   "files": [
  33.     "dist"
  34.   ]
  35. }

name是包的名字，可以直接写包名，比如loadash，或者添加域，类似于@koa/router这种，@后面是你npm注册的用户名。key为包的关键字。
如果以@开头为包名，是私有包名，要付费的，发布时候会报错，具体还没了解

402 Payment Required - PUT https://registry.npmjs.org/@ynzy%2frollup_test - You must sign up for private packages

查看npm源

我们要先查看自己的npm源，因为有的人可能使用淘宝源，cnpm之类的，我使用的nrm，所以先切换npm源为：
npm ———— https://registry.npmjs.org/

nrm use npm

创建npm账号

如果我们没有npm账号是没有办法发布的，先创建一个账号，有的忽略

npm adduser

登录账号

npm login

发布包

npm publish

发布成功

发布成功之后就可以在npm官网上搜到我们的包了
image.png

使用

我们发布了包以后就可以进行使用了

npm i ynzy_rollup_test

  • html使用

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>datav libs example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.2/dist/vue.global.js"></script>
<script src="../dist/datav.js"></script>
</head>
<body>
<div id="app">
  {{massage}}
  <test-component/>
</div>
<script>
  Vue.createApp({
    setup() {
      var massage = 'hello world'
      return {
        massage
      }
    }
  }).use(datav).mount('#app')
</script>
</body>
</html>

  • vue项目中使用 ```javascript import { createApp } from ‘vue’ import App from ‘./App.vue’ import datav from “ynzy_rollup_test”; createApp(App).use(datav).mount(‘#app’)

```javascript
<template>
  <test-component/>
</template>

<script>
</script>