自定义简单组件并上传npm库及上传npm库常见报错的解决方案

最新推荐文章于 2024-07-08 10:10:56 发布

梦不觉=_=

最新推荐文章于 2024-07-08 10:10:56 发布

阅读量1.1k

点赞数

文章标签： node.js

本文链接：https://blog.csdn.net/JiaoKunGe/article/details/113584736

版权

自定义简单组件并发布到npm库

一、注册npm账号
上npm官网注册账号并进行邮箱验证（必须验证，否则无法上传）

二、创建vue项目
1、我们使用 vue init webpack-simple ntc-kkfileview 命令创建一个简易项目（因为创建的是组件，所以不需要那么多配置，配置多了修改起来也麻烦，webpack-simple足够了）
在这里插入图片描述
如上图，一路回车，即可创建一个简易轻量级的vue项目专供组件使用。

2、修改项目目录
在这里插入图片描述
如图所示，新增index.js文件（用于打包时将组件抛出）、新增components文件夹和vue组件，注意文件层级。

三、封装组件及各参数配置

1、编写组件(ntc-kkfileview.vue)，注意name的参数配置，该值将作为组件名被调用

<template>
  <div class="ntc-kkfileview">
    
  </div>
</template>

<script>
export default {
  name: 'ntc-kkfileview',
  data () {
    return {
      
    }
  },
  props: {
    fileUrl: {
        type: String,
        default: ''
    }
  },
  mounted() {
      if(this.fileUrl){
        var url = this.fileUrl; //要预览文件的访问地址
        window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(url));
      }else{
          alert("请输入正确的文件路劲")
      }
  },
}
</script>

<style lang="scss">
.ntc-kkfileview{
    
}
</style>

2、在App.vue中预览使用

<template>
  <div>
    <ntc-kkfileview :fileUrl='fileUrl'/>
  </div>
</template>

<script>
import NtcKkfileview from './components/ntc-kkfileview'
export default {
  components:{
    NtcKkfileview
  },
  data () {
    return {
      fileUrl: 'hello 你好'
    }
  }
}
</script>

<style>

</style>

3、添加index.js内容

import NtcKkfileview from './src/components/ntc-kkfileview'
import _Vue from 'vue'


// if (typeof window !== 'undefined' && window.Vue) {
//     window.Vue.component('yyl-npm-practice', Main)
// }
// Main.install = function(Vue){
//     Vue.component(Main.name, Main)
// }

// 因为使用 window.Vue.component('yyl-npm-practice', Main) 的时候 外部引用的时候 有可能会覆盖该组件，导致组件无法正常使用；使用下面的的定义方式后， 在.vue 环境下 使用方式不变， 在只引用 ys-expression.js 环境下 需在 new Vue（） 之前加 window['ys-expression'].default.install();
NtcKkfileview.install = Vue => {
    // 这一步判断window.Vue是否存在，因为直接引用vue.min.js， 它会把Vue绑到Window上，我们直接引用打包好的js才能正常跑起来。
    if (!Vue) {
        window.Vue = Vue = _Vue
    }
    Vue.component(NtcKkfileview.name, NtcKkfileview)
}
export default NtcKkfileview;

4、修改package.json参数配置

这里主要是两个参数的修改和注意
private：是否私有，此处值一定为false，否则无法上传npm
main：指定打包后的入口文件，我们通常会将文件放在同一目录下，require会自动查看该目录的package.json文件，然后加载main指定的入口文件，若没有main字段或不存在package.json文件，则会加载该目录下的index.js或index.node文件

5、修改 webpack.config.js（entry和output）
在这里插入图片描述
修改打包入口和出口，区分开发环境和生产环境
main.js 是npm run dev 的入口，就是App.vue，用于调试/测试我们开发的组件; index.js是ntc-kkfileview.vue，就是我们开发的组件，我们打包到生产环境打包就只是单纯的 ntc-kkfileview.vue 组件，不包含app.vue,这样npm 下载下来的才是单独的组件。

在这里插入图片描述
这里进行一个优化将devtool: '#eval-source-map’注释，生产环境的时候，我们就不调试了，也不需要.map文件，那就先把这个 devtool删了，然后放最后，如上图，只要在开发环境的时候才启用这个调试。

6、修改index.html的js引用路径
因为我们修改了output 的 filename，所以引用文件的名字也得变。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>ntc-kkfileview</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/ntc-kkfileview.js"></script>
  </body>
</html>

注：运行项目（npm run dev）之前，请记得npm i和npm build，修改配置后，若不build，有可能会报错
在这里插入图片描述
至此，组件封装结束，在App.vue里面调用该组件，并做测试，调试。

四、打包上传npm库
在项目目录下执行：npm login
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210203164844460.png
注：用户名和密码不要输错了，特别是密码；再就是地址，若安装了淘宝镜像，极有可能是淘宝地址，需更改：

此时执行npm config get registry和npm config set registry=http://registry.npmjs.org命令即可

npm run build打包
特别提醒，上传前请确认已打包，否则。。。

上传publish 发布
npm publish
在这里插入图片描述
出现此画面后登录npm账号即可查看自己库中的组件

出现上图则代表上传成功，已可npm下载使用，若版本更新，请记得一定要修改package.json中的版本号，否则上传报错。

常见报错及解决方案
1、版本重复
在这里插入图片描述
解决方案：修改package.json中的版本号重新上传即可。

2、包名重复
在这里插入图片描述
解决方案：修改package.json、webpack.config.js等配置文件中的包名。

3、npm邮箱未验证
在这里插入图片描述
解决方案：换个npm账号或去npm官网验证邮箱

4、未知问题（仅做参考）
在这里插入图片描述
无法理解的问题(+_+)
解决方案：
1、查看npm邮箱验证
2、发布前未npm run build
3、重启电脑（解决90%的问题）

5、库的地址不对（淘宝镜像）
在这里插入图片描述
解决方案：执行npm config get registry和npm config set registry=http://registry.npmjs.org

6、npm账号未登录
在这里插入图片描述
解决方案：npm login

7、引入sass版本不对，导致在使用lang="scss"语句时报错（比较坑）
在这里插入图片描述
这种情况我多数是在创建组件项目时未勾选sass，自己手动安装node-sass导致

解决方案：手动安装node-sass默认是最新版本，但有时考虑到vue-cli的版本，需要降低node-sass和sass-loader的版本（卸载已有版本，重新npm指定版本），如下图（已降低版本）
在这里插入图片描述

梦不觉=_=

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
自定义简单组件并上传npm库及上传npm库常见报错的解决方案

简单组件发布到npm库一、注册npm账号上npm官网注册账号并进行邮箱验证（必须验证，否则无法上传）二、创建vue项目1、我们使用 vue init webpack-simple ntc-kkfileview 命令创建一个简易项目（因为创建的是组件，所以不需要那么多配置，配置多了修改起来也麻烦，webpack-simple足够了）如上图，一路回车，即可创建一个简易轻量级的vue项目专供组件使用。2、修改项目目录如图所示，新增index.js文件（用于打包时将组件抛出）、新增componen
复制链接

扫一扫