如何把作品发布到npm官网(vite版本)

214 阅读1分钟
  1. 创建lib/index.ts,将所有需要导出的文件导出
export { default as Switch } from './Switch.vue';
export { default as Button } from './Button.vue';
export { default as Tabs } from './Tabs.vue';
export { default as Tab } from './Tab.vue';
export { default as Dialog } from './Dialog.vue';
export { openDialog as openDialog } from './openDialog';

export { default as Switch } from './Switch.vue';的意思就是import Switch from './Switch.vue' export {Switch}

2.因为使用的是vite,所以需要使用rollup打包代码

首先先配置rollup.config.js

import esbuild from 'rollup-plugin-esbuild'
import vue from 'rollup-plugin-vue'
import scss from 'rollup-plugin-scss'
import dartSass from 'sass';
import { terser } from "rollup-plugin-terser"

export default {
    input: 'src/lib/index.ts',
    output: {
        globals: {
            vue: 'Vue'
        },
        name: 'evue',
        file: 'dist/lib/evue.js',
        format: 'umd',
        plugins: [terser()]
    },
    plugins: [
        scss({ include: /\.scss$/, sass: dartSass }),
        esbuild({
            include: /\.[jt]s$/,
            minify: process.env.NODE_ENV === 'production',
            target: 'es2015'
        }),
        vue({
            include: /\.vue$/,
        })
    ],
}

3.全局安装rollup

yarn global add rollup
  1. 安装其他依赖
yarn add --dev rollup-plugin-esbuild rollup-plugin-vue rollup-plugin-scss sass rollup-plugin-terser

为防止安装速度过慢,请在package.json中,添加下面的一段代码


  "resolutions": {
    "node-sass": "npm:sass@1.26.11"
  }
  1. 运行rollup -c 6.在package.json中添加files和main,files里面是你要打包输出的文件,main里面是你需要输出的主文件
"files": [
    "dist/lib/*"
  ],
  "main": "dist/lib/evue.js",

7.查看自己的npm使用的是什么源,必须是官方源才可以上传

npm config get registry
npm config set registry https://registry.npmjs.org/

8. 在终端输入npm login,登陆你的账号,然后输入npm publish