文章序

本篇文章将指导你如何开发一个自己的npm项目，并列举其中一些细节

业务代码

可以是纯js，也可以使用框架和组件，看你个人需求

工程文件

package.json文件
main字段指向你打包后的产物的js入口文件，files字段表示发布到npm仓库中哪些文件和文件夹，devDependencies在其他人引用你的包时不会被安装，dependencies则会被安装

{
    "name": "my_project",
    "version": "1.0.0",
    "type": "module",
    "privae": false,
    "main": "dist/index.umd.cjs",
    "files": ["dist", "README.md"],
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview"
    },
    "dependencies": {
        "@element-plus/icons-vue": "^2.3.1",
        "axios": "^1.9.0",
        "codemirror": "^5.65.17",
        "codemirror-editor-vue3": "^2.7.0",
        "element-plus": "^2.9.11",
        "file-saver": "^2.0.5",
        "js-base64": "^3.7.7",
        "js-cookie": "^3.0.5",
        "mavon-editor": "^3.0.1",
        "pinia": "^3.0.3",
        "pinia-plugin-persistedstate": "^4.4.1",
        "spark-md5": "^3.0.2",
        "vue": "^3.5.13",
        "vue-router": "^4.5.1",
        "vue-simple-uploader": "^1.0.3"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^5.2.3",
        "prettier": "^3.6.2",
        "sass": "^1.89.2",
        "sass-loader": "^16.0.5",
        "vite": "^6.3.5"
    }
}

构建文件

使用vite或webpack都可以，这里以vite为例
vite.config.js文件
主要看build对象，其中outDir定义打包后文件名称，lib对象中entry字段定义了项目的入口文件，name字段定义打包后js文件名称，fileName定义打包后css文件名称，rollupOptions中定义打包过程中需要使用哪些插件

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'node:path'
// https://vite.dev/config/
export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd(), '')
    const { VITE_APP_BASE_API_URL } = env
    return {
        plugins: [vue()],
        resolve: {
            alias: {
                '~': path.resolve(__dirname, './'),
                '@': path.resolve(__dirname, './src')
            },
            extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
        },
        server: {
            port: 8080,
            host: true,
            open: true,
            proxy: {
                '/dev-api': {
                    target: VITE_APP_BASE_API_URL,
                    changeOrigin: true,
                    rewrite: path => path.replace(/^\/dev-api/, '')
                }
            }
        },
        build: {
            outDir: 'dist', // 修改输出目录名称
            lib: {
                entry: path.resolve(__dirname, './src/main.js'),
                name: 'gwNetdisk',
                fileName: 'gwNetdisk'
            },
            rollupOptions: {
                external: ['vue', 'element-plus', 'axios'],
                output: {
                    globals: {
                        vue: 'Vue',
                        'element-plus': 'ElementPlus',
                        axios: 'axios'
                    }
                }
            }
        },
        css: {
            postcss: {
                plugins: [
                    {
                        postcssPlugin: 'internal:charset-removal',
                        AtRule: {
                            charset: atRule => {
                                if (atRule.name === 'charset') {
                                    atRule.remove()
                                }
                            }
                        }
                    }
                ]
            }
        }
    }
})

发布

当你准备好了工程我们终于可以来到发布环节了

首先需要准备一个npm账号，可以去官网注册 https://www.npmjs.com/

注册号账号需要在npm设置你的账号密码

npm adduser

在后续对话里输入账号密码即可

一切准备就绪后进入你的项目根目录，也就是package.json那一层，执行

npm publish

如此，你的项目被成功发布到npm仓库中了