关于npm:Npm-上传攻略-菜鸟版

前言

截止本文公布时——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
再次公布就能够了

结语

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