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

1.发布ts/es6转成的js文件到npm上；最简单的方法,去ts官网将需要转的js贴进去,将javascript代码拷贝出来,存储成js文件,命名为cal.js

文章图片

【vue|发布angular指令，vue指令，js文件到npm的流程】
然后新建文件夹,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 { }// 组件中使用指令

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中使用
// 在浏览器中就可以看到