1月に調べたことのメモです。
Angular関連
Date系ライブラリとIANA
最近はLuxonを利用しています。Intlのブラウザ対応状況、他のライブラリのタイムゾーン関連のサポートについて気になったので、そのあたりを調べた時のメモです。
- ECMAScript Internationalisation compatibility table
- IE11は
accepts IANA timezone names
に対応していない
- IE11は
- TimeZone support · Issue #19 · andyearnshaw/Intl.js · GitHub
- IANA data implementedしている他のライブラリ情報なども
- GitHub - date-fns/date-fns: ⏳ Modern JavaScript date utility library ⌛️
複数のプロジェクタで共有したいロジックとコンポーネントをパッケージ化した
- TypeScripのUtilパッケージ
- GitHub - alexjoverm/typescript-library-starter: Starter kit with zero-config for building a library in TypeScript, featuring RollupJS, Jest, Prettier, TSLint, Semantic Release, and more!
- これを使った
- webpackで自分で環境作ろうしたけど、これが楽すぎたので
- パッケージ自体に取り込みたくない外部ライブラリは
peerDependencies
にrollup.config.js
でexternal
指定も必要(書かなくても含まれなかったんだが?)
- Write a library using TypeScript library starter
- 紹介記事
- GitHub - alexjoverm/typescript-library-starter: Starter kit with zero-config for building a library in TypeScript, featuring RollupJS, Jest, Prettier, TSLint, Semantic Release, and more!
- Angualr Component
- GitHub - dherges/ng-packagr: Transpile your libraries to Angular Package Format
- これを使った
- webpackで自分で環境作ろうしたけど(以下略)
- Angular Package Formatになる
- Angular CLIと組み合わせ可能
- パッケージに含めたいモジュールを
public_api.ts
で定義する
- パッケージに含めたいモジュールを
- Git urls形式で取得することにしているのでルートの
package.json
にmain
,module
,es2015
,typings
,metadata
,files
の設定を追加- 通常は
dist
フォルダ自体をパッケージとして登録する(dist
内のpackage.json
を利用する)
- 通常は
- Building an Angular 4 Component Library with the Angular CLI and ng-packagr
- 紹介記事
- GitHub - dherges/ng-packagr: Transpile your libraries to Angular Package Format
必要な前提知識
最終的に上記環境を利用し、簡単にパッケージ作成ができるようになったのだが、実際には色々とつまづいた。原因は、前提となる基礎知識がかけていたから。
(基本的な公式ドキュメントはしっかり読みましょうという話)
- npm Documentation
- 11 - How to create Node.js modules | npm Documentation
- 12 - How to publish a package | npm Documentation
npm adduser
,npm publish
,npm version patch
,npm version x.x.x
など
- 14 - How to work with scoped packages | npm Documentation
- プライベートなパッケージ作成について
@username/project-name
npm publish --access=public
- 19 - Understanding packages and modules | npm Documentation
- packageとは, moduleとは
- package.json | npm Documentation
- Tutorial for Writing a TypeScript Library
ReactのHOCs
- React Table - A lightweight, fast and extendable datagrid built for React
- Reactの Higher-order Components (HoCs) という概念に関するメモ - Qiita
- ReactのHigher Order Components詳解 : 実装の2つのパターンと、親Componentとの比較 | プログラミング | POSTD
その他
- cpx と rimraf を試す – アカベコマイリ
rimraf
をよくみかけたのでrm -rf
に該当する
- TypeScript の型定義ファイルと仲良くなろう - Hatena Developer Blog
- ゆるふわだったので復習
- declaration space
- Value、Type、Namespace
そのファイルがいま module なのか?を意識すると定義ファイルでハマることも少なくなると思います。
namespace が導入されたのは結構最近なので、以前からある定義ファイルでは module となっている場合があるということを頭に入れておくといいでしょう。
declare global { }
- prittierを特定フォルダ以下のtsファイルで走らせる
npx prettier --single-quote --trailing-comma es5 --write src/**/*.ts