reactjsでes6で作ったnpmパッケージはimportできないので要注意的なお話

タイトル通り。
React Nativeだとそんなことないような気がするんだけど、reactjsだとダメっていう。
class propertiesとかそういうところとかで引っかかる。
ちなみにnpmパッケージじゃなくて自分でes6のcomponentを作ってimportをしたときはbabelの設定をちゃんとしていればOK的な。

とりあえず理由はわからないわけではないんだけど、面倒なので、今日はちゃんとnpm publishする前に確認をしよう的なお話をば。

とりあえずnpm publishをして公開する前に、ちゃんとes5にトランスパイルしたファイルを作っておいてあげる。
babelうんちゃらみたいなコマンドを毎回打つのが面倒なので、package.jsonのscriptsに記述しておきましょう的な。

"scripts": {
  "start": "cross-env NODE_ENV=development parcel src/index.html",
  "build": "npm-run-all -p build:*",
  "build:src": "cross-env NODE_ENV=production parcel build src/app.js -d ./dist -o index --no-cache",
  "build:lib": "NODE_ENV=production node_modules/babel-cli/bin/babel.js ./src/ --out-dir ./lib/ --ignore app.js"
},

npm-run-allを使うことでまとめてnpmコマンドできるので入れましょう的な。
で、build:srcでは通常のwebブラウザで使うためにビルドするコマンド。
build:libはnpmパッケージをimportするためのes5にトランスパイルしたものを作るコマンド。

ってな感じでとりあえずnpmを公開する前に、es6で書いたものは他の人がimportできないので、ちゃんとes5にトランスパイルしましょう的なみたいな。