Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
14
Help us understand the problem. What is going on with this article?
@mizchi

flowtype で typescript の *.d.ts のように型定義 *.js.flowを出力する

More than 3 years have passed since last update.

やりたいこと

flowで書かれた npmパッケージを作成する時、webpack/browserifyでバンドルされるのを想定してes5水準までコンパイルしつつ、かつflowの型定義も外部ファイルに頼らず提供したい

.babelrc
package.json
src/ # ソース
  index.js
  index.test.js
lib/ # コンパイル済み
  index.js
  index.js.flow

*.test.js はスキップしつつ、コンパイル済みの index.js と index.js.flow を作成したい

方法

babelの設定は省略。yarnを使ってるけどnpmに置き換えれば良いとして、yarn add babel-cli flow-bin -D を前提として

package.json
{
  ... 
  "scripts": {
    "build:flow-gen": "flow gen-flow-files src/ --out-dir lib --ignore '.*.test.js'",
    "build:js": "babel src -d lib --ignore test.js",
    "prepublish": "yarn build:js && yarn build:flow-gen"
  },
  "files": [
    "lib/"
  ]
}

テストするときは babel-register なり babel-node なりでそのまま実行すれば良い。正しいコンパイルが行われているかはbabelの責務なので。

意味

- babel-cli で src => lib へコンパイル
- flow gen-flow-files で lib へ 型定義ファイルの書き出し
- files で publish 対象を lib に限定
- prepublish で npm publish 前に実行するコマンドとしてフック

14
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
plaid
CXプラットフォーム「KARTE」の開発・運営、EC特化型メディア「Shopping Tribe」の企画・運営、CX特化型メディア「XD(クロスディー)」の企画・運営

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
14
Help us understand the problem. What is going on with this article?