记录一下发布NPM包流程，保姆级教程

清晨細雨

已于 2024-03-14 13:23:10 修改

阅读量245

点赞数

文章标签： npm 前端 node.js

于 2023-07-06 11:08:06 首次发布

本文链接：https://blog.csdn.net/qq_16785561/article/details/131570510

版权

1、项目根目录下新增组件存放文件夹plugins，如下如所示：

2、编写自己的组件，以其中的basicTool.vue为例，如下所示：（其中组件name命名要与3中配置文件vue.config.js中保持一致）



<template>
  <div v-if="isShow" class="toolBox">
    <div class="LeftOperation">
      <template v-for="(i, index) in TopOperationList()">
        <el-button v-if="i.ToolType == 'TopLeft'" :size="i.BtnSize" :type="i.BtnType" :icon="i.Icon" class="btnClass" :plain="i.BtnStyle == 'plain'?true:false" :round="i.BtnStyle == 'round'?true:false" :circle="i.BtnStyle == 'circle'?true:false" @click="leftBtnClick(i)" >{{ i.MenuName }}</el-button>
      </template>

      <!-- 额外的工具插槽 -->
      <slot name="moreLeftOperation" class="btnClass" />
    </div>
    
    <div class="clearFloat" /> 
  </div>
</template>

<script>
import basicTableColumnConfiguration from './basicTableColumnConfiguration.vue'; // 公用table组件
export default {
  name: "basicTool",//此处需要注意
  components: { basicTableColumnConfiguration },
  props: {
    // 表头数据
    ColumnDataList: [String, Object, Array, Number],
    // 行高
    rowHeight: {
      type: Number,
      default: 55,
    },
    // 权限按钮列表
    PermissionsBtn: [String, Object, Array, Number],
  },
  data() {
    return {
      rowHeightValue: this.rowHeight, // 行高
    };
  },
  computed: {
    // 根据模块标识匹配权限按钮
    TopOperationList() {
      return function () {
        return this.PermissionsBtn;
      };
    },
    // 根据模块标识匹配权限按钮
    topRightToolList() {
      return function () {
        var a = JSON.parse(JSON.stringify(this.PermissionsBtn));
        a = a.filter((u) => u.ToolType == "TopRight" && u.MenuEncoding != "Tool_Custom" && u.MenuEncoding != "Tool_RowHeight");
        return a;
      };
    },
    // 是否有自定义
    hasCustom() {
      return function () {
        var a = false;
        this.PermissionsBtn.forEach((i) => {
          if (i.MenuEncoding == "Tool_Custom") {
            a = true;
          }
        });
        return a;
      };
    },
    // 是否有行高
    hasRowHeight() {
      return function () {
        var a = false;
        this.PermissionsBtn.forEach((i) => {
          if (i.MenuEncoding == "Tool_RowHeight") {
            a = true;
          }
        });
        return a;
      };
    },
    isShow() {
      return function () {
        if(this.ColumnDataList.length>0){
          return true
        }else{
          return false
        }
      };
    },
  },
  watch: {
    
  },
  mounted() {},
  methods: {
    // 重置配置
    resetConfiguration() {
      this.$emit("resetConfiguration");
    },
    // 确认配置
    confirmConfiguration(e) {
      this.$emit("confirmConfiguration", e);
    },
    // 修改行高
    editRowHeight() {
      this.$emit("editRowHeight", this.rowHeightValue);
    },
    // 改变行高,最小值55
    inputChange(e) {
      // if(e < 55){
      //     this.rowHeightValue = '55'
      // }else{
      //     this.rowHeightValue = e
      // }
    },
    // 点击右侧操作栏按钮操作
    rightOperationClick(e) {
      this.$emit("rightOperationClick", e);
    },
    // 左侧顶部操作按钮点击事件
    leftBtnClick(e) {
      /** *******新增、新建工单、新增线路、新增药品统一为新增********/
      // 新增
      if (e.MenuEncoding == "AddNew") {
        this.$emit("AddNew");
      }
      // 批处理
      if (e.MenuEncoding == "BatchProcessing") {
        this.$emit("BatchProcessing");
      }
      // 批量删除
      if (e.MenuEncoding == "BatchDelete") {
        this.$emit("BatchDelete");
      }
      // 点表模板
      if (e.MenuEncoding == "PointTemplate") {
        this.$emit("PointTemplate");
      }
      // 卡片管理
      if (e.MenuEncoding == "CardManagement") {
        this.$emit("CardManagement");
      }
      // 批量修改从站号
      if (e.MenuEncoding == "BatchEdit") {
        this.$emit("BatchEdit");
      }
      
      this.$emit("leftBtnClick",e);
    },
  },
};
</script>
<style scoped lang="scss">
.toolBox {
  padding-bottom: 10px;
  .LeftOperation {
    width: 70%;
    float: left;
    min-height: 40px;
  }
  .rightOperation {
    float: left;
    width: 30%;
    min-height: 40px;
    font-size: 14px !important;
    .btnMargin {
      margin: 0 5px;
    }
    .rightOperationMember {
      float: right;
    }
  }
}
</style>

3、plugins下新增配置文件index.js，文件内容如下：

//组件
import basicSearch from "./components/basicSearch.vue"; // 公用查询组件
import basicTable from "./components/basicTable.vue"; // 公用table组件
import basicTableColumnConfiguration from "./components/basicTableColumnConfiguration.vue"; // 公共表格表头配置
import basicTableOperation from "./components/basicTableOperation.vue"; // 公共表格操作栏组件
import basicTableSpecial from "./components/basicSearch.vue"; // 特殊表格组件
import basicTool from "./components/basicTool.vue"; // 公共工具栏



//组件列表
const components = [basicSearch, basicTable, basicTableColumnConfiguration, basicTableOperation, basicTableSpecial, basicTool, ];


//定义install方法，Vue作为参数
const install = Vue => {
  //判断是否安装，安装过就不用继续执行
  if (install.installed) return;
  install.installed = true;
  //遍历注册所有组件
  components.map(component => Vue.component(component.name, component));


};

//检测到Vue再执行
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  //所有组件，必须具有install方法才能使用Vue.use()
  ...components
};

4、本地引用组件：main.js中写入如下代码，

import myUI from '../plugins/index'
Vue.use(myUI)

在页面中使用：

<template>
  <div class="hello">

    <basic-tool :column-data-list="TableHeaderList" :row-height="rowHeight" :menu-encoding="MenuEncoding" :permissions-btn="PermissionsBtn"></basic-tool>
  </div>
</template>

测试没问题后，可以进行下面打包流程

5、配置package.json文件，如下：

{
  "name": "test-plug-in",//包名：npm 包的名称必须为小写，并且可以包含字母、数字、连字符和下划线
  "version": "0.1.01",//版本号
  "description": "yukong组件封装",//描述
  "private": false,//是否私有
  "author": "LR",//作者
  "keywords": [//关键字，可以再npm上模糊搜索到包
    "公用查询组件",
    "公用table组件",
    "公共表格表头配置",
    "公共表格操作栏组件",
    "特殊表格组件",
    "公共工具栏"
  ],
  "main": "dist/test-plug-in.umd.min.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name test-plug-in -dest lib plugins/index.js"
  },

/**********
scripts中lib注解
// target: 默认为构建应用，改为 lib 即可启用构建库模式
// name: 输出文件名
// dest: 输出目录，默认为 dist，这里我们改为 lib
// entry: 入口文件路径
vue-cli-service build --target lib --name lib [entry]


*********/

6、.gitignore文件配置屏蔽不想暴露的文件

.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?


src/
plugins/
public/
vue.config.js
babel.config.js
*.map
*.html

7、新建终端执行npm run lib 打包，打包后生成dist文件：

8、登录npm

在终端中输入命令：npm login 登录，如果没有NPM账号，需要先注册，并认证邮箱（记住绑定自己常用邮箱，因为后续登录和发包都需要频繁用到邮箱验证码），注册地址：NPM官网注册

按提示输入用户名、密码、邮箱、邮箱验证码后登录成功

9、发包

输入命令npm publish发包，发包成功后如下图所示：

在npm官网上输入你的包名就能搜索到你发布的npm包了

10、使用刚刚发布的npm包

终端运行安装命令：npm i xxx --save,xxx为你的npm包名，在mainjs中全局引入

import myUI from 'XXX';
import "XXX/dist/XXX.css"; 
Vue.use(myUI);

之后在项目中直接使用即可：

<basic-tool :column-data-list="TableHeaderList" :row-height="rowHeight" :menu-encoding="MenuEncoding" :permissions-btn="PermissionsBtn"></basic-tool>

11、更新npm包

修改好组件后，更新自己npm包项目中的package.json文件里version版本号，重复上述发包流程：运行命令npm run lib 打包，成功后输入命令npm publish发包

引用的项目中删除依赖包npm uninstall xxx，重新安装依赖包npm install xxx，懒得删除可以直接安装最新版。

遇到的问题：

1、在使用过程中，如果遇到报错如下图所示

可以参考配置如下，在vue.config.js文件中加入以下代码：

module.exports = {
    transpileDependencies: [
        '***********'//自己的npm包名称
    ],
}

2、npm包使用了图片等静态资源，放在其他项目里安装依赖引用不显示图片等，是因为引用路径问题。这里只提供一种懒人解决方案，其他方案请自行百度。

⑴、npm包中使用静态资源，新增public/static/images文件存放图片如图：

代码中使用静态资源引用，代码中请参考如下：

⑵、其他项目中使用依赖包，新增public\static\js\img文件存放图片（此路径根据引用依赖后图片访问路径修改），把npm打包后生成的dist文件中的img文件夹下的图片放到此文件夹下

清晨細雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录一下发布NPM包流程，保姆级教程

npm发包
复制链接

扫一扫

记录一下发布NPM包流程，保姆级教程

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