node,npmのお勉強1

普段使ってるけど、あまり詳しくは知らない。軽く調べる。

機能深掘り

npmのあまり知られてない機能 10選 - from scratch
http://yosuke-furukawa.hatenablog.com/entry/2014/06/10/100410

npm shrinkwrap
npm version
npm repo
npm docs
npm dedupe
npm t
npm outdated
david
npm deprecate
npm unpublish
npm xmas
npm config set init.license

これはライブラリ作る人は必ず覚えておくと良いコマンドですね。
npm version patchとか npm version minorとかやると以下の事を実行してくれます。

yarn

npmの互換のパッケージマネージャーらしい

Yarnファーストインプレッション - Qiita
http://qiita.com/mizchi/items/1002fde0de10e7c54fb2

--prefer-offline が速い！

君の名は・・YARN！ - Qiita
http://qiita.com/endam/items/c77396705e2a158f1952

既に以前パッケージをインストールしたことがあるのであれば、yarn install --prefer-offlineによってサーバーにリクエストせずにオフラインで高速にインストールすることが可能だそうです。

yarn (+ webpack) を使ってみる - Qiita
http://qiita.com/knjname/items/0cc813622e0121c05723

cleanとかpack,upgrade-interactive,whyとか。。

.yarnclean

yarn (+ webpack) を使ってみる - Qiita
http://qiita.com/knjname/items/0cc813622e0121c05723

クローズドなパッケージをnpm install

githubのprivate repositoryをnpmでインストールする - Qiita
http://qiita.com/shinout/items/c6f12d69e68b312d62fa

package.json

{
  "dependencies": {
    "<modulename>": "git+https://<token>:[e-mail]/<username>/<reponame>#<tagname>"
  }
}

覚えておこう。。

パッケージにして再利用できるようにしておきたいな。。

「npm パッケージ 作成 github - Google 検索」しつつ。。

初めてのnpm パッケージ公開 - Qiita
http://qiita.com/TsutomuNakamura/items/f943e0490d509f128ae2

自分のプログラムの開発が進み、将来的にbeta 版パッケージとlatest パッケージの両方を公開したいと思う時があるかもしれません。
その場合にはnpm tag 機能を使用します。

なるほどー。

3時間でできるnpmモジュール - Qiita
http://qiita.com/cognitom/items/75736e27cc7de151a7d5

いきなりnpmに公開するのは、ちょっと抵抗があったり、なかったり。npmでは、ローカルで開発中のモジュールも、ファイルパスを指定すればインストールできます。ただ、この方法だと--save-devできません。

githubとCI

CircleCIで出来るコト - Qiita
http://qiita.com/noboru_i/items/7d300eb63ae667bf8dc2

プライベートで軽くお試しからがいいので、CircleCIがいいかも。。

GitHubとCircleCIを連携させる - Qiita
http://qiita.com/kooohei/items/4806fdb6b92982e47f81

具体的なチュートリアルとして参考。

Circle CIを使ったNode.jsプロジェクトのテスト - Qiita
http://qiita.com/gaishimo/items/3803d2c997c7c6bdc03d

nodeプロジェクトの例

CircleCI 2.0 で Node.js のテストを試す - Qiita
http://qiita.com/pine613/items/9ddea9ca89a1b51fcba8

2.0でできることが増えたらしい。

CircleCI 2.0は最新版のDockerを使ってdocker buildできる - Qiita
http://qiita.com/ieee0824/items/208ccb1ccd2ea4228ed5

おお、golangのdockerイメージとかでもできるのか。。

テスト

CircleCIの公式サンプルのyarn testでこけた。

TypeScriptのテストをパッと書く / 特に何も入れずにスクレイプのテストをパッと書く – Wano Developers Blog
https://developers.wano.co.jp/typescript%E3%81%AE%E3%83%86%E3%82%B9%E3%83%88%E3%82%92%E3%83%91%E3%83%83%E3%81%A8%E6%9B%B8%E3%81%8F-%E7%89%B9%E3%81%AB%E4%BD%95%E3%82%82%E5%85%A5%E3%82%8C%E3%81%9A%E3%81%AB%E3%82%B9%E3%82%AF/

全然すぐにできなかったけど、若干楽しみつつプロトタイプ設定してみた。

TypeScriptでPromiseを使う – 山本隆の開発日誌
http://www.gesource.jp/weblog/?p=7663

TypeScript 1.5 + ES6 を今すぐ使う方法を調べた - Qiita
http://qiita.com/seanchas_t/items/06e0b859c09953d49845

Babel6でMochaとChaiを使ったテストを書く - Qiita
http://qiita.com/yamadayuki/items/9885c9e126648cd8c5e3

avaのwatch

初めてのnpm パッケージ公開 - Qiita
http://qiita.com/TsutomuNakamura/items/f943e0490d509f128ae2

今回はテスト自動化のava の--watch モードを使用し、ファイルの変更が発生するタイミングで随時テスト行われるようにしながら開発を行っていきたいと思います。

便利そうだー。（electronがたちあがりまくったので、そういう場合には自重。）
avaでのテストの書き方も参考になりそう。

power-assert

TypeScript( or JavaScript ) + mocha + power-assert + espower-typescript 注意点まとめ – Techno Cattleya Blog
https://technocattleya.com/blog/2017/05/27/espower-typescript-notes/

上記のようにすることで、モジュールが全て読み込まれ、TS でも正しくトランスパイルしてくれます。
JS で上記のように書いて、Babel でトランスパイルしても問題ないので、なるべくこの書き方で統一しましょう。

使うかわからないけど、ついつい調べてしまう。。

依存パッケージの更新や脆弱性の確認

Gemnasium
https://gemnasium.com/

オープンソースのためにフリープランがある。
Gemnasium Toolbeltを使うとプライベートレポの権限を与えずに利用できそう。。

自分がプロジェクトで使っているGemの脆弱性チェックしてる？ - Qiita
http://qiita.com/macera/items/7d57f0ad20d86ad05ebe

チェックしたいなあ。

babelとtypescirpt

最初にtypescriptが盛り上がり、babelが追い越して2.0になってtypescriptの選択肢が再び、、的な印象。
型指定があるから、学習コストはtypescriptの方が高いかな。

私がTypeScriptについて勘違いしていたこと、そしてその理由 | プログラミング | POSTD
http://postd.cc/i-was-wrong-about-typescript-here-is-why/

言い換えれば、TypeScriptはasync/awaitをサポートしているが、それを全ブラウザで理解可能なECMAScriptにコンパイルすることはできません。
この機能を使わないのであれば、ビルドプロセスからBabelJSを消してしまっても構わないのです。
追記:読者のBirk Skyumが指摘してくれたのですが、この機能のES3へのサポートはTypeScriptのロードマップに存在しており、バージョン2.0でリリースされる予定とのことです。

Babel 6.7 で async/await する - Qiita
http://qiita.com/hashedhyphen/items/44701fcc18bd40066aa7

async/awaitを使いこなせるように。。

今更ながら Babel で ES7 Async/Await を試してみた - Qiita
http://qiita.com/ea54595/items/e6e36fcf1d10deadc17a

npm 開発で再び Babel を導入することにした – アカベコマイリ
http://akabeko.me/blog/2017/04/babel-again/

babelを2017年でつかっている参考記事。

Webpack + Babel 最小構成での環境構築（2017年度6月版） | WEBYA.IN
http://webya.in/blog/2017/06/04/webpack-babel-%E6%9C%80%E5%B0%8F%E6%A7%8B%E6%88%90%E3%81%A7%E3%81%AE%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%EF%BC%882017%E5%B9%B4%E5%BA%A66%E6%9C%88%E7%89%88%EF%BC%89/

webpack使いやすいよなあ。。

最小構成のES6モジュールを用いたフロントエンド開発環境 - Qiita
http://qiita.com/og24715/items/63d6546ac3a9363228af

babel-preset-env

babel-preset-envを簡単にさわってみた。 - Qiita
http://qiita.com/ryuone/items/13f5d450c3865709ba10

要するに、compat-table(ECMAScript 6 compatibility table)を用いて、サポートされている環境に基づいて必要なBabelプラグインを自動で決定するライブラリということらしいです。

ブラウザ対応をより丸投げできるってことかな。
なるほど。

webpack

webpack初級者から中級者にステップアップするために理解しておきたいプラグインまとめ - Qiita
http://qiita.com/R-Yoshi/items/30282dee7b6d5ddd6622

今どきなオレオレTypeScript開発環境 - Qiita
http://qiita.com/junichi/items/45323a26876332a2473f

【意訳】Webpackの混乱ポイント - Qiita
http://qiita.com/chuck0523/items/caacbf4137642cb175ec

webpack初級者から中級者にステップアップするために理解しておきたいプラグインまとめ - Qiita
http://qiita.com/R-Yoshi/items/30282dee7b6d5ddd6622

hotロードを有効にする

設定ファイルの変更

• devServer設定
• entryにclientを追加
• プラグインを読み込み
• publicPathを設定（ブラウザ上の相対パスで該当スクリプトのありかを示すディレクトリ）
• webpack-dev-serverを使うのが簡単だが、独自サーバーにモジュールを読み込んでも可能
• 古い記述を紹介してる記事があるので注意
• 複数の時については公式glenjamin/webpack-hot-middlewareのmulti-compiler modeを参照
• webpack公式の英文を読むのも結局近道かも

Express
http://dackdive.hateblo.jp/category/Express

glenjamin/webpack-hot-middleware: Webpack hot reloading you can attach to your own server
https://github.com/glenjamin/webpack-hot-middleware

webpack dev server
https://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement-with-inline-mode-on-cli