一.制作组件
1.安装angular CLI
npm install -g angular-cli@latest
2.生成一个新的angular程序
ng new demo
3.创建一个模块
ng g m testmodule(我创建的模块名字是ionGaugeCanvasModule)
4.在testmodule.module.ts里export 该组件
5.做测试准备,在app.module.ts中import 该module,然后ng serve测试一下是否好用
二.发布组件
1.安装 ng-packagr ,根目录下运行该命令
npm i ng-packagr --save
安装在devDependency中的声明
npm i ng-packagr --save-dev
2.在工程根目录创建 ng-package.json,填写如下代码
{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"lib": {
"entryFile": "public_api.ts"
}
}
3.在工程根目录创建 public_api.ts文件，并导入testmodule(之前创建的模块),填写如下代码
export * from './src/app/testm/testm.module';
4.修改package.json,在package.json文件中写入packagr脚本，并将private值改为false
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"packagr": "ng-packagr -p ng-package.json" //新添加的
},
"private": false, //修改为false
5.在package.json文件中找到dependencies字段并全部删除
"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"core-js": "^2.5.4",
"firstdemodiective": "0.0.0",
"nv-test-header": "^1.0.5",
"rxjs": "~6.2.0",
"zone.js": "~0.8.26"
}
6.执行脚本打包
执行之后根目录下会多出一个dist文件夹
npm run packagr
7.cd到dist文件夹执行npm pack
一定要在dist文件夹下执行
npm pack
8.返回根目录下执行npm login命令并输入账号密码和邮箱
返回根目录下执行命令
没有npm账号的可以去npm官网注册一个，非常快。
根目录下执行
npm login
按照提示输入用户名密码和邮箱，这里密码输入的时候是看不见的
登录成功后会有提示
9.再次cd进入dist目录执行npm publish命令
再次cd进入dist目录执行命令
执行成功之后会有提示信息，npm绑定的邮箱会收到邮件提示上传成功，也可以直接npm官网查看
npm publish
可能会有些小伙伴报如下错误
You do not have permission to publish 'censorify'. Are you logged in as the correct user? : censorify
这是由于发布包的名称被人占用了,只需要在package.json里，把name换成其他的就可以了
you must verify your email before publishing a new package:
是因为没有用邮箱激活登录到注册账号的邮箱 激活一下就好了
本文转载自 https://blog.csdn.net/m0_37729058/article/details/86150970