やりたかったこと
- ng-packagrを利用してAngular用の外部モジュールを生成
- モジュールのnpmでの公開
- issueやソースの管理はgithubで
ng-packagrを利用してAngular用の外部モジュールを生成
作るものは何でもいいのですが、できるだけ簡単で、かつ、今自分が作っている他プロジェクトでも多少役に立つものにしたいなあ、ということで、
所謂、Scroll-SpyをメニューとコンテンツにDirectiveを貼るだけで実現するようなのにしようかと思います
※今回の記事の趣旨とは異なるので以後、実装に関しては触れていません
Angularプロジェクト作成
$ ng new simple-scroll-spy-app
このプロジェクトは公開するモジュールのソース管理や動作確認等をするものになります
モジュールを作成
$ cd simple-scroll-spy-app $ ng generate library simple-scroll-spy
このコマンドでprojectsディレクトリ下にサブプロジェクトが切られます
中に親プロジェクトとは異なるpackage.jsonがあると思いますが、これが公開モジュールに反映されるpackage.jsonになります
テンプレ的なComponentやServiceが自動で作成されますが、今回は使わないので消しました
モジュールを実装します
// コンテンツ側に貼るDirective
@Directive({
selector: '[scrollSpyContent]'
})
export class ScrollSpyContentDirective
// メニュー側に貼るDirective
@Directive({
selector: '[scrollSpyMenu]'
})
export class ScrollSpyMenuDirective
// NgModuleで定義追加とexport
@NgModule({
imports: [
],
declarations: [
ScrollSpyContentDirective,
ScrollSpyMenuDirective
],
exports: [
ScrollSpyContentDirective,
ScrollSpyMenuDirective
]
})
export class SimpleScrollSpyModule { }
このモジュール自体はサブディレクトリに配置されているだけなので、親プロジェクトからは普通に参照できます
なので、app.moduleとapp.componentで軽い動作確認ができます
// app.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
SimpleScrollSpyModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule
// app.component.ts
@Component({
selector: 'app-root',
template: `
<ul><li scrollSpyMenu
...
<div scrollSpyContent
...
})
export class AppComponent
パッケージ化
サブプロジェクトにあるpublic_api.tsを編集します
ここでexportするものがパッケージ化の対象になります
export * from './lib/simple-scroll-spy.module';
続いて、サブプロジェクトのpackage.jsonを編集していきます
前途したようにこれが公開情報を含んだpackage.jsonになります
github
今更ですがgithubアカウントが無い場合は登録します
自分がgithubに登録したのがはるか昔（その割にBitBucketがメインなのでずっと放置してた）なのでどんなだったか覚えてませんが
まあ、よくあるメアドで認証して～って感じの説明不要なものだったかと
リポジトリを用意します
Create Repositoryから適当な名前で、ライセンスはMITとかでいいんじゃないですかね
作成したgithubリポジトリの情報をpackage.jsonに書いていきます
"repository": {
"type": "git",
"url": "git+https://github.com/neko2me/simple-scroll-spy.git"
},
"bugs": {
"url": "https://github.com/neko2me/simple-scroll-spy/issues"
},
"homepage": "https://github.com/neko2me/simple-scroll-spy#readme",
"license": "MIT",
npm
同様にnpmもアカウントが無い場合は登録します
特に特筆すべきことは無かったかと思いますが、username、password、メアドはローカルのnpmに設定するので忘れないように
npmに登録するモジュール名を決める必要があります
npm install xxxxのxxxxのことです
npmで検索して使いたい名前が被っていないか（既に存在しないか）確認します
被っているならば別の名前にするか、アカウント名/モジュール名にする必要があります
モジュール名が決まったらpackage.jsonに書いていきます
"name": "angular-simple-scroll-spy", // バージョンはメジャーでもマイナーでも何でもいいから1以上に "version": "0.0.1", // アカウント名でいいんじゃないですかね "author": "neko2me",
後はdescriptionとkeywordsあたりを必要なら適宜、dependenciesは作成したモジュールが何かを必要とするなら記述しましょう
おそらくデフォルトでpeerDependenciesが指定されていると思いますが、
これは最低限親が持っていてほしいモジュール、みたいなニュアンスなのでとりあえずそのままで
さて、ビルドしてみます
親プロジェクトのディレクトリから子プロジェクト内のng-package.jsonを指定します
$ ng-packagr -p ./projects/simple-scroll-spy/ng-package.jsonこの時、ng-packagrなんてねぇよ！と言われた場合、以下どちらかだと思います
// ng-packagrをglobalインストールしていないなら $ npm install -g ng-packagr // 親プロジェクトにng-packagrがないなら、おそらく以下あたりが必要 $ npm install --save--dev ng-packagr @angular-devkit/build-ng-packagr @angular-devkit/build-angular
成功すると、distというディレクトリにそれっぽいディレクトリが作られます
想定どおりのものが作られたかどうか確認します
以下のコマンドでディレクトリをtarに固めます
$ npm pack ./dist/simple-scroll-spy作成された*.tgzを他のプロジェクトで
$ npm install --save simple-scroll-spy.tgzとすると、通常のnpmリポジトリからinstallしたのと同程度の状態にできます
その他の方法としてnpm linkでディレクトリを一時的にモジュールと同等にすることもできるのですが、
自分の環境（windows）だと安定しなかったり・・・
モジュールのnpmでの公開
というわけで出来上がって何となく動いてる風のdistディレクトリ下を公開してみます
まずはローカルのnpmクライアントに作成したアカウントを紐づけます
$ npm adduserここで登録時に設定したアカウント名やパスワード、メアドを聞かれます
アカウントが紐付いたら、公開コマンドを実行します
$ npm publish --access=public ./dist/simple-scroll-spy
成功したなら、はい、公開されてしまいました
npmの自分のアカウントページを確認すると、公開されているかと思います
公開されたモジュールを他のモジュールにnpm installして動作確認
$ npm install angular-simple-scroll-spy
最後に、githubへcommit & pushして、目標達成です
今回の成果物は以下になります
npm
https://www.npmjs.com/package/angular-simple-scroll-spy
github
https://github.com/neko2me/simple-scroll-spy
いじょ
