如何发布一个npm公共库

一、在npm的官网上注册一个账号登录,https://www.npmjs.com/

二、新建一个目录,比如starLichanghui,进入到这个starLichanghui目录里,使用 npm login 命令登录,按照提示操作:

三、进入starLichanghui目录,执行命令npm init 初始化项目生成package.json文件

注意:package.json 文件的name值唯一,此名字就是将来供下载使用的npm包名

四、在starLichanghui目录新建index.js文件

function parseTime() {
    ...
}
module.exports = { parseTime }

五、在starLichanghui目录下发布npm包 :npm pulish

此步骤其实发布的就是starLichanghui目录以及目录下的文件(index.js、package.json)

如果发布成功,请在 https://www.npmjs.com/settings/XXX/packages 下查看

拓展:

  1.使用发布的npm包

   npm install study123 --save (包名就是package.json文件的name值)
   import test from 'study123'

  2.更新一个已经发布的包
     npm version patch //修改包的版本
     npm publish //重新发布包

  3.删除自己发布的npm包
   npm unpublish
     npm --force unpublish

        4.删除安装过的公共组建库

         npm uninstall starlichanghui

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
发布一个 Vue UI ,你需要先创建一个 Vue 项目,然后在其中编写你的组件。接下来,你需要使用 webpack 或者其他构建工具将你的组件打包成一个可以被其他人引用的,最后使用 npm 发布你的。 以下是一个简单的步骤: 1. 创建一个 Vue 项目 ``` vue create my-ui-library ``` 2. 编写你的组件代码,将其放置在 `src/components` 目录下。 3. 在 `src/index.js` 文件中导出你的组件 ```javascript import MyComponent from './components/MyComponent.vue' export default { install(Vue) { Vue.component('my-component', MyComponent) } } ``` 4. 配置 webpack,将你的组件打包成一个 在 `webpack.config.js` 中添加以下配置: ```javascript const path = require('path') const { CleanWebpackPlugin } = require('clean-webpack-plugin') const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { mode: 'production', entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'my-ui-library.js', library: 'MyUiLibrary', libraryTarget: 'umd' }, externals: { vue: 'vue' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] }, plugins: [ new CleanWebpackPlugin(), new VueLoaderPlugin() ] } ``` 在上面的配置中,我们将 `src/index.js` 打包成一个名为 `my-ui-library.js` 的文件,并且设置 `library` 和 `libraryTarget` 属性以便其他人可以使用 `MyUiLibrary` 引用你的。 注意,我们在 `externals` 中将 `vue` 设置为外部依赖,这意味着使用你的的人需要自己在项目中引入 Vue。 5. 在 `package.json` 中添加必要的字段 ```json { "name": "my-ui-library", "version": "1.0.0", "description": "My awesome Vue UI library", "main": "dist/my-ui-library.js", "keywords": [ "vue", "ui", "library" ], "author": "Your Name", "license": "MIT", "peerDependencies": { "vue": "^2.6.11" } } ``` 在上面的配置中,我们需要将 `main` 字段设置为我们打包后的文件路径,同时添加 `peerDependencies` 字段来指定我们的需要依赖 Vue。 6. 发布npm 现在,我们可以使用以下命令将我们的发布npm: ``` npm login npm publish ``` 注意,在发布之前,你需要先在 npm 上注册一个账号。如果你已经注册了账号,可以使用 `npm login` 命令登录。 发布后,其他人就可以使用以下命令来安装你的: ``` npm install my-ui-library ``` 然后,在他们的 Vue 项目中引入你的组件: ```javascript import Vue from 'vue' import MyUiLibrary from 'my-ui-library' Vue.use(MyUiLibrary) ``` 至此,你的 Vue UI 发布成功了!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值