公共组件进行npm发包使用

前言

最近开发中涉及到一个组件需要在多个项目中进行使用，为方便此组件的维护工作，决定将组件打包发布到npm上，并通过npm install 的方式进行使用，于是研究一下将组件打包发布与使用的流程。

此demo的github仓库地址：github.com/zhangyue44/…

组件A初始化

新建一个文件夹，为zy-testtt，npm init -y 生成一个package.json文件。由于本组件想使用webpack进行搭建，可直接修改package.json中的内容，具体内容如下所示。其中name值为要发布的npm包的名字，version为版本号，main为别的项目引用你的组件的入口(这里别忘记修改)，repository为你的组件的仓库地址，keywords为关键词。

{
  "name": "zy-testtt",
  "version": "1.9.8",
  "main": "build/zy.js",
  "repository": {
    "type": "git",
    "url": "test"
  },
  "keywords": [
    "vue",
  ],
  "dependencies": {
    "@babel/core": "^7.14.8",
    "babel-loader": "^8.2.2",
    "core-js": "^3.15.2",
    "regenerator-runtime": "^0.13.9",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "webpack": "^5.24.4",
    "webpack-cli": "^4.5.0",
    "@babel/preset-env": "^7.14.8",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "copy-webpack-plugin": "^9.0.1",
    "css-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
    "postcss-loader": "^6.1.1",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^3.2.1",
    "vue-loader": "^15.9.6",
    "vue-template-compiler": "^2.6.14",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.8.0"
  }
}

之后使用npm install安装相关依赖，安装完成之后添加webpack的相关配置，此demo没有添加webpack打包的相关优化配置，因为不是本文的重点，可自己进行添加。关键配置如下所示，output为打包输出路径，对于图片资源的处理，使用webpack5.x中新增的asset,此资源模块类型为webpack内置无需安装，可替代url-loader。

output: {
    path: resolveApp('./build'),
    filename: 'zy.js',
    library: "zy-testtt", // 给这个库起一个名字,指定的就是你使用require时的模块名
    umdNamedDefine: true, // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
    globalObject: "self"
},
{
  test: /\.(png|jpe?g|gif|svg)$/,
  type: "asset",
  generator: {
    filename: "img/[name].[hash:6][ext]"
  },
  parser: {
    dataUrlCondition: {
      maxSize: 100 * 1024
    }
  }
},

框架搭建完成后，从入口文件开始往里塞自己的代码,记得在入口文件中一定要进行导出，在其它项目中才可以进行引入。

import helloWorlds from './helloWorld.vue'
export default helloWorlds

npm发布

组件A开发完成后，使用npm run build进行打包，打包完成后就可以把包发布到npm上了。这里注意自己的组件name名一定不能和npm上别人已经发布的名字相同，而且name名称不能有大写字母，否则会发布失败。首先在项目根目录终端输入npm login进行npm登录，这里注意不能使用taobao源或其它源，要使用npm源才可以。可以使用nrm更改源。登录成功后npm publish进行包发布，此时你的包已经发布完成了，可以登录npm官网进行查看。这里再介绍一些其它命令：

删除发布的包： npm unpublish
让发布的包过期： npm deprecate
更新包： 需要手动修改package.json中的version版本号，更改完成后，分别执行打包、登录、发布

项目B引用组件A

现在可以在项目B中引入使用组件A了，例如我的组件A的名字为zy-testtt，可通过npm install zy-testtt安装组件A依赖，然后import sum from 'zy-testtt'即可使用组件A，具体使用方式可以看我github上的代码。

<template>
  <div id="app">
    <sum :msg="'heng'"></sum>
  </div>
</template>

<script>
import sum from 'zy-testtt'
</script>

组件的简单打包发布流程大致就这些，组件A中如果有图片与字体资源时，可能在组件B中无法展示，这个问题后面再进行探讨。