前言

截止本文公布时——2020-08-13，作者也是刚学会npm如何公布本人的代码，期间走了很多弯路——即便网上有很多教程，具体起因在此略过，发表此文的初衷是心愿帮忙和我一样的初学者学会如何公布到npm，能力无限，有谬误欢送提出！

注释

作者技术栈为Vue、Typescript —— 均为初学，包管理工具为Yarn —— 不分明的请百度

创立我的项目

  • 全局装置Vue-cli脚手架
yarn global add @vue/cli
  • 创立我的项目（具体流程略过）
vue create npm-demo

  • 创立Loading组件
components    └─ Loading            index.ts            loading.vue

index.ts

//先引入loading组件import LoadingComponent from './loading.vue'const Loading: any = {}Loading.install = function (Vue: any) {    // 生成一个Vue的子类 同时这个子类也就是组件    const ToastConstructor = Vue.extend(LoadingComponent)    // 生成一个该子类的实例    const instance = new ToastConstructor()    // 将这个实例挂载在我创立的div上    // 并将此div退出全局挂载点外部    instance.$mount(document.createElement('div'))    document.body.appendChild(instance.$el)    //注入vue的原型链    Vue.prototype.$loading = {        show() {            instance.show = true        },        close() {            instance.show = false        }    }}export default Loading

loading.vue

<template>  <div v-show="show" class="container">    <div class="loading"></div>  </div></template><script lang="ts">import { Component, Vue } from "vue-property-decorator";@Component({})export default class Loading extends Vue{// ================= Data start =================  private show = false;// ================= Data end =================}</script><style scoped>.container {  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);}.loading {  width: 100px;  height: 100px;  border-radius: 100%;  border: 5px #ffffff solid;  border-right-color: #87ceeb;  animation: loading 1s linear infinite;}@keyframes loading {  0% {    transform: rotate(0deg);  }  100% {    transform: rotate(360deg);  }}</style>

在main.ts中注册

import Loading from './components/Loading/index'Vue.use(Loading)

在App.vue中应用

<script lang="ts">import { Component, Vue } from "vue-property-decorator";@Component({  components: {},})export default class App extends Vue {  private mounted(): void {    // 这里不必any会报错：Property '$loading' does not exist on type 'App'.     // 心愿晓得的大佬告知    (this as any).$loading.show();    }}</script>

yarn serve 运行下代码测试一下~

不出意外的话，应该能看到一个loading图标在转。

批改配置

上一节创立了一个我的项目和一个loading组件，本节开始打包前的配置

  • 批改 package.json

在 scripts 字段下创立 lib 命令

"scripts": {    "serve": "vue-cli-service serve",    "build": "vue-cli-service build",    "lib": "vue-cli-service build --target lib --name npm-demo --dest lib ./src/components/Loading/index.ts",    "lint": "vue-cli-service lint"}

解释一下：
--target lib 将一个独自的入口构建为一个库（打包为组件）
--name npm-demo 组件的名称
--dest lib 输入目录，默认为 dist
./src/components/Loading/index.ts 入口文件

  • 批改 tsconfig.ts

为了生成申明文件，须要退出如下的配置

compierOptions: {   ...  "sourceMap": false,  // 这个能够不关  "declaration": true,   "declarationDir": "lib",  ...}
  • 创立 vue.config.js
module.exports = {    chainWebpack: config => {        // 为了让基于Typescript的组件生成它们的申明（.d.ts）文件        // 详情 https://github.com/vuejs/vue-cli/issues/1081        if (process.env.NODE_ENV === 'production') {            config.module.rule('ts').uses.delete('cache-loader');            config.module                .rule('ts')                .use('ts-loader')                .loader('ts-loader')                .tap((opts) => {                    opts.transpileOnly = false;                    opts.happyPackMode = false;                    return opts;                });        }    },    // 设置css: { extract: false },能够强制内联，就不会将css独自打包成一个文件，导致页面没有style    css: { extract: false },    // 不生成SourceMap    productionSourceMap: false,    // 敞开并行打包，否则无奈主动生成 `.d.ts` 文件    parallel: false}

打包组件

运行 yarn lib 生成的目录构造如下

lib    │  demo.html    │  main.d.ts    │  npm-demo.common.js    │  npm-demo.umd.js    │  npm-demo.umd.min.js    │      └─components        └─Loading                index.d.ts                loading.vue.d.ts

作者的吐槽：个人感觉 npm-demo.umd.js、demo.html、npm-demo.common.js、main.d.ts 删了也没关系，咱们只有压缩后的版本就好。
能够看到 index.d.ts、loading.vue.d.ts 曾经生成了，当初咱们把它们移到根目录（lib），批改后的文件目录为

lib    index.d.ts    loading.vue.d.ts    npm-demo.umd.min.js

公布筹备

  • 首先，你要有一个npm的账号...请读者本人百度，材料很多
  • 而后，如果你应用了淘宝的镜像，须要长期切换成npm的
yarn config set registry https://registry.yarnpkg.com
  • 在lib目录下生成package.json
yarn init
question name (lib):                组件名称question version (1.0.0):           版本号question description:               形容question entry point (index.js):    入口文件question repository url:            仓库地址question author:                    作者question license (MIT):             许可协定question private:                   是否公有，必须为 false

  • 批改 package.json

为了更好的形容咱们的组件，须要批改一下

{    ...  "types": "loading.vue.d.ts",  // 类型申明文件入口  "keywords": [    "vue",    "vuejs",    "typescript",    "vuecli4.x"  ]}

公布组件

登录后

npm publish --access=public

如果公布失败，大概率是包名反复了，换一个
批改 package.json 的 name 为 @zeronofreya/npm-demo-2020-08-13
再次公布就能够了

结语

本文临时告一段落，辛苦大家了