包管理工具 - 如何在npm发布包 - 《🥇前端进阶目录》

前置知识
- 构建目标
  - 库
配置文件
最佳实践
注意事项
删除包

前置知识

构建目标

当你运行vue-cli-service build时，你可以通过—target选项指定不同的构建目标。它允许你将相同的源代码根据不同的用例生成不同的构建。

库

注意对 Vue 的依赖 在库模式中，Vue 是外置的。这意味着包中不会有 Vue，即便你在代码中导入了 Vue。如果这个库会通过一个打包器使用，它将尝试通过打包器以依赖的方式加载 Vue；否则就会回退到一个全局的Vue变量。要避免此行为，可以在build命令中添加—inline-vue标志。 vue-cli-service build --target lib --inline-vue

你可以通过下面的命令将一个单独的入口构建为一个库：

vue-cli-service build --target lib --name myLib [entry]
File                     Size                     Gzipped
dist/myLib.umd.min.js    13.28 kb                 8.42 kb
dist/myLib.umd.js        20.95 kb                 10.22 kb
dist/myLib.common.js     20.57 kb                 10.09 kb
dist/myLib.css           0.33 kb                  0.23 kb

这个入口可以是一个.js或一个.vue文件。如果没有指定入口，则会使用src/App.vue。
构建一个库会输出：

dist/myLib.common.js：一个给打包器用的 CommonJS 包 (不幸的是，webpack 目前还并没有支持 ES modules 输出格式的包)
dist/myLib.umd.js：一个直接给浏览器或 AMD loader 使用的 UMD 包
dist/myLib.umd.min.js：压缩后的 UMD 构建版本
dist/myLib.css：提取出来的 CSS 文件 (可以通过在vue.config.js中设置css: { extract: false }强制内联)

警告如果你在开发一个库或多项目仓库 (monorepo)，请注意导入 CSS是具有副作用的。请确保在package.json中移除“sideEffects”: false，否则 CSS 代码块会在生产环境构建时被 webpack 丢掉。

配置文件

vue.config.js

const path = require("path");
module.exports = {
  pages: {
    index: {
      entry: "examples/main.js",
      template: "public/index.html",
      filename: "index.html",
    },
  },
  //拓展 webpack 配置，使 package 加入编译
  chainWebpack: (config) => {
    config.module
      .rule("js")
      .include.add(path.resolve(__dirname, "packages"))
      .end()
      .use("babel")
      .loader("babel-loader")
      .tap((options) => {
        //修改它的选项
        return options;
      });
  },
};

package.json

{
  "name": "chu-ui",
  "version": "0.1.0",
  "private": false,
  "main": "dist/chu-ui.umd.min.js",  //注意此处需要修改
  "author": {
    "name": "chu"
  },
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib packages/index.js"  //打包库命令
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}

.npmignore

#忽略目录
examples/
packages/
public/
#忽略指定文件
vue.config.js
babel.config.js
*.map

入口文件

//整个包的入口
//定义install方法 接收Vue作为参数，如果使用use注册插件，则所有的组件都将被注册
import Button from "./button";
import Dialog from "./dialog";
import Input from "./input";
import Checkbox from "./checkbox";
import Radio from "./radio";
import RadioGroup from "./radio-group";
import Switch from "./switch";
import CheckboxGroup from "./checkbox-group";
import Form from "./form";
import FormItem from "./form-item";
import "./fonts/font.scss";
const components = [
  Button,
  Dialog,
  Input,
  Checkbox,
  Radio,
  RadioGroup,
  Switch,
  CheckboxGroup,
  Form,
  FormItem,
];
const install = function(Vue) {
  //遍历注册全局组件
  components.forEach((component) => {
    Vue.component(component.name, component);
  });
};
//判断是否是直接引入文件，如果是，就不用调用 Vue.use()
if (typeof window !== "undefined" && window.Vue) {
    install(window.Vue)
}
export default {
  install,
};

最佳实践

切换源为 npm

nrm ls 
nrm use npm

npm login

发布

npm publish

注意事项

报错1：发布时报错：npm ERR! no_perms Private mode enable, only admin can publish this module:

解决：修改自己的发布源（需要重新登录）

npm config set registry http://registry.npmjs.org

删除包

npx force-unpublish package-name '原因描述'

来源：npm Force Unpublish

注意：24小时内可操作。

https://blog.csdn.net/qq_39009348/article/details/104027678
https://www.cnblogs.com/yalong/p/10388384.html
https://juejin.im/post/6844904111133966344#heading-0
https://juejin.im/post/6844903636808499214#heading-0