发布angular指令，vue指令，js文件到npm的流程

1.发布ts/es6转成的js文件到npm上；

最简单的方法,去ts官网将需要转的js贴进去,将javascript代码拷贝出来,存储成js文件,命名为cal.js

 

然后新建文件夹,send-npm-js里面的目录如下

package.json里面代码如下:

{
  "name": "cal", // npm 名字(要避免和npm上已有的名字重复)
  "version": "0.1.0", // 版本号
  "description": "cal", // 描述
  "main": "cal.js", // 需要发布的文件路径
  "keywords":["add", "subtract", "multiply", "divide"], // 关键词
  "author":"slailcp", // 作者
  "private": false, // 此处一定要是false
  "license":"MIT",
  "scripts": { },
  "dependencies": {},
  "devDependencies": {}
}

然后cmd打开send-npm-js文件夹,运行下面的命令

npm login // npm登录

npm publish // 发布, 

不报错出现+ cal@0.1.0的情况下说明就发布好了,此时可以去浏览器上登录你的npm账号,搜索cal,就可以看到了,项目中安装 npm i -S cal

 

2.发angular指令到npm

一写个指令demo

1.新建项目
ng new send-npm-angular

2. 在生成好的Angular里面创建一个模块
ng g m cals

3.在模块里面创建一个组件
ng generate directive cals/ng-cal
目录如下:

安装上面发布的cal插件(npm i -S cal);

然后,cals.module.ts,然后添加如下代码

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgCalDirective } from './ng-cal.directive';

// cal 是上面自定义的npm插件,现在把cal的add方法和CalsModule打包到ng-cal-test一起输出,
// 使用的话就是 import {add, CalsModule} from 'ng-cal-test';
import { add } from 'cal';

@NgModule({
  declarations: [NgCalDirective],
  imports: [
    CommonModule
  ]
  exports: [
    NgCalDirective // 此处要导出哦
  ]
})
export class CalsModule { }
export const $add =  add;

添加指令功能: ng-cal.directive.ts随便加点代码

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { add, subtract, multiply, divide } from 'cal';

@Directive({
  selector: '[appNgCal]'
})
export class NgCalDirective {
  el:ElementRef
    constructor(el: ElementRef) {this.el = el;}
    @Input('appNgCal') count: number;

    @HostListener('mouseenter') onMouseEnter() {
        this.setWidth(add(100 + this.count || 5)); // 鼠标移上,改变宽度;
    }
    
	private setWidth(count: number) {
      this.el.nativeElement.style.width = count + 'px';
    }
}

二.准备发布npm

1.安装ng-packagr  (npm i ng-packagr --save)

2.在根目录添加ng-package.json文件

{
    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
    "lib": {
      "entryFile": "public_api.ts"
    },
    "whitelistedNonPeerDependencies": [
      "cal" // 指令需要依赖cal插件,所以需要添加到白名单
    ]
  }

3.根目录添加public_api.ts文件

export * from './src/app/cals/cals.module';

4.在package.json添加如下代码

"name":"ng-cal-test",//npm包的名字
"private": false, // 此处一定要为false
"license":"",
"description": "",
"keywords":[""],
"author":"",
"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "packagr": "ng-packagr -p ng-package.json" // scripts新加这一行
 },
 "dependencies": {
    "cal": "^0.1.0" // dependencies中只保留这一行,其余全部删除
 },

5.根目录运行
npm run packagr命令

此时项目根目录会出现一个dist文件,

命令行打开dist目录运行命令
npm pack

最后
npm login
npm publish (发布成功)

此时在工作中的angular项目里面安装npm i -S ng-cal-test
app.module.ts中使用

import { NgModule } from '@angular/core';
...
import {CalsModule, $add} from 'ng-cal-test'
 
console.log($add(1+3)); // 浏览器输出 4

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    ...
    CalsModule // 将模块导入进来
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// 组件中使用指令
<div appNgCal="20"></div>

3.vue指令发布到npm

编写指令(测试没问题后就可以等待发布了)
vue-cal.ts

const install = (Vue: any) => {
    Vue.directive('cal', {
        bind: (el: Element) => {
            el.setAttribute('calname', 'hehe');
        }
    })
};

// 使用install, 官方文档有说明
export default {
    install,
}

// main.ts 使用
// import cal from './vue-cal.ts'
// Vue.use(cal);

1.用 vue-cli 创建一个 default 项目,删除src目录,
2.新建packages文件夹,packages文件夹下面是是vue-cal.ts

2.package.json添加lib命令

{
  "name": "v-cal",
  "version": "0.1.0",
  "description": "描述",
  "main": "lib/vue-cal.umd.min.js", // 发布到mpm上的文件路径
  "keywords":[""],
  "author":"作者",
  "private": false, // 此处一定要为false
  "license":"MIT",
  "scripts": {
    "build": "vue-cli-service build",
    "start": "vue-cli-service serve",
    "lib": "vue-cli-service build --target lib --name vue-cal --dest lib packages/index.ts" // 新添加命令, lib文件夹名称 vue-cal打包下来的文件名
  },
  "dependencies": {
    "vue": "^2.6.11"
  },
...

3.运行npm run lib,就可以看到根目录有个lib文件夹,里面就是打包和压缩文)

此时我们发布压缩包也就是vue-cal.umd.min.js文件

运行npm login (如果之前电脑有登录的话,就不需要再次登录了,直接运行npm publish),

npm publish (发布成功!)

使用:

在工作项目中,运行npm i -S v-cal,
main.ts
import cal from 'v-cal.ts'
Vue.use(cal);

component中使用
<div v-cal></div> // 在浏览器中就可以看到<div calname="hehe"></div>