npm发布步骤


开发调试

使用npm link关联本地包进行开发调试

  • 链接当前包到全局
// 当前跟目录下运行
npm run build
npm link
  • 运行环境使用本地npm包
# 在运行项目目录运行
npm link 包名

npm打包发布

增加配置文件

复制 .npmrc.example 并重命名 .npmrc

修改.npmrc配置

首先对账号和密码进行Base64编码, 在命令行或者Terminal中输入(以下所有配置都不需要保留尖括号, 整体换掉)

echo -n '账号:密码' | openssl base64

Windows用户可能会提示openssl 命令不存在, 可以先在idesk上安装Git 客户端, 之后再Git Bash中执行就可以了。

init.author.name = 用户名
init.author.email = 邮箱
init.author.url = url
# an email is required to publish npm packages
email=邮箱
always-auth=true
_auth=上一步的Base64编码输出

修改版本号

修改package.json中的version
每次发布需修改版本号, 否则无法发布

打包

npm run build

发布

npm publish
npm publish --access publish

发布后如下图显示即发布成功

在这里插入图片描述

npm之version和tag

查看当前的tag和对应的version。npm dist-tag ls
查看my-package发布过的所有版本号。npm view my-package versions
给my-package设置tag,对应到版本version。npm dist-tag add my-package@version tag
设置成最新的正式版npm dist-tag add my-package@1.0.0 latest
更新到最新的测试版npm dist-tag add my-package@1.0.0-alpha.1 next

  • 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、付费专栏及课程。

余额充值