いつもjavascriptを書くときに使っているテンプレート集

  • 17
    いいね
  • 0
    コメント

はじめに

個人用にカスタマイズされているので参考程度に見てもらえると良いと思います。

詳しくは、各テンプレートのreadmeやリポジトリをみてください。
パッケージ、タスク、ディレクトリ構造はreadmeに書いてあります。

リポジトリ
https://github.com/abouthiroppy/dish

以下のPRを参考に話したいと思います。
https://github.com/abouthiroppy/dish/pull/28

共通で使っているもの

ファイル一覧

templates/common

.appveyor.yml, .travis.yml.editorconfigなどは共通で使っています。
以前は .gitignore.eslintignore も一緒だったのですが、条件分岐が多くなってしまったので分けました。

lintのルールファイル

リポジトリ一覧

lint-config

パッケージ

上記のものは全テンプレートで使われているので以後、省略します。

テストまわりについてですが、基本的にreactではjestを使い、他(node等)ではavaを自分は使用します。

プレーン

ファイル一覧

templates/plain

汎用的なテンプレートです。
nodeを使ったアプリケーション書く時などにも使うので、babelやwebpackはデフォルトでは入れていません。

パッケージ

  • ava
    • テストランナー
  • nyc
    • IstanbulのCLIです、 カバレッジを出します

CLI

ファイル一覧

templates/cli

CLIツールを作るときに使うテンプレートです。
自分がnpmでグローバルにいれているcliツールまとめでもこのテンプレートを使って開発されています。

パッケージ

  • ava
  • nyc
  • chalk
    • 出力文字に色を簡単に付けれるようにします
  • pify

cluifigletを入れようと思いましたが、毎回必要ではなかったのでやめました。
また、pifyからnixtへ変更するつもりでしたがやめました。
ava@0.17.0でpifyを使い、このように書くと落ちてしまうので、nixtへ移行しようかなと思ったのが理由です。 しかし、0.16.0では落ちないので一旦バージョンをピンしています。
後ほど原因を調べようかなと思います。

React ライブラリ

ファイル一覧

templates/react-library

Reactのライブラリを作るときに使うテンプレートです。
自分はReact.createClassで書くのが好きなのですがやはり可読性が大変つらいのでjsxを使うように変更しました。(commit#902ce40ca384546eb6e55f041f898127d0dc05ef)
なので、prepublish時にbabelを通すことによりes2015からes5へ落としnpmjsの方へpublishするように変更しました。

package.json
{
  "scripts": {
    "build": "babel src -d lib",
    "prepublish": "npm run build"
  }
}

また、 examplesも確認に使うのでexamples用のwebpackとwebpack-dev-serverもテンプレート内に用意しています。

パッケージ

もしかしたら今後、styled-componentsjsssheetifycsjsのようなcssサポートライブラリを使うかもしれないです。(多分ない気がしますが。。。)

フロントエンド

ファイル一覧

templates/react-application
templates/react-redux-application

Reactを基準に構成しています。
毎回、 reduxを必要としないため2つ用意してあります。

主に大きな変更

webpack@beta(2017/01/03現在 v2.2.0-rc.3)へのアップグレード

記事: medium/webpack-2-2-the-release-candidate

extract-text-webpack-plugin@beta, webpack-dev-server@betaに変更する必要があります。

また、webpack.config.jsの変更が必要になります。

v1からv2への移行については、
webpack.js.org/guides/migrating
javascriptplayground.com/moving-to-webpack-2 などの記事を参考にしてください。
これ以降の破壊的変更はないので、 v2へ乗り換えていい時期だと自分は考えています。
(extract-text-webpack-pluginについては未だ、query処理とuseのサポートとが期待どおりに動かない等がありますので、安定はしていない気もしますが。。。)

上の記事に書いてない例での変更だと、postcssの今までの設定は

module.exports = {
  postcss: () => [autoprefixer, precss]
}

のように書けましたが、v2からは書けなくなります。
postcss.config.jsをつくるか、webpack.LoaderOptionsPluginに書くかになります。
また、 OccurenceOrderPluginの名前がv2からはOccurrenceOrderPluginに変更、 DedupePluginがなくなるなどがあります。
詳しくはwebpack/releasesのBreaking Changesを探すとわかると思います。

Jestの変更が必要

.babalrc#env
v2でes2015のmodulesをfalseにするため、transform-es2015-modules-commonjsの指定が必要になりました。
https://facebook.github.io/jest/docs/tutorial-webpack.html#webpack-2

webpack-mergeの導入

survivejs/webpack-merge
webpackの設定ファイルを分割します。

以前は、webpack.config.jswebpack.production.config.jsという風に分けていましたが、
今回からは、webpack.config.jswebpack.dev.config.jswebpack.prod.config.jsという風に分けました。
webpack.config.jsで共通部分と、ファイルのルーティングを行うように変更しました。

設定ファイル一覧
使用プラグイン一覧

webpack標準以外で使っているプラグインの一覧です。

react-hot-loader@next(v3.0.0)へアップグレード

react-hot-loader

npmの方ではまだv1.3.1(2017/01/04現在)なので、react-hot-loader@nextのように書かないと入りません。

参考資料

React Hot Loader 3
Document React Hot Loader 3
Update TodoMVC example to React Hot Loader 3

変更方法

react-hot-loader/babelの場合

  1. .babelrcreact-hot-loader/babel を追加する .babelrc#L13
  2. webpackのentryにreact-hot-loader/patchを追加する webpack.dev.config.js#L13
  3. エントリーポイントにreact-hot-loaderの設定を入れる src/index.js

上記のファイルは、webpackのv2とv1で書き方が少し変わるので注意してください。
FYI: react-hot-boilerplate/src/index.js, React Hot Loader 3.0 beta demo

また、NODE_ENV=productionのときは常に if (module.hot) がfalseとなるためBabiliなどに通すと消すことが可能です。

precssからcssnextへ移行

precss というのは、Sassのように書けるようにするライブラリです。
今後はcssnextを使っていきます。 cssnextというのは、策定中のcss仕様を書けるようにするプラグインです。

ただ、importmixinsは無いため、別途postcssのプラグインが必要となります。

プラグイン一覧
- precss
- autoprefixer
+ postcss-cssnext
+ postcss-mixins
+ postcss-smart-import
+ postcss-reporter
+ postcss-browser-reporter
注意点

postcss-cssnextは内部にautoprefixerを含んでいるため、 postcss.config.jsにautoprefixerを指定すると怒られます。

また、requireの順序を気にしなければなりません。
postcss-cssnextをpostcss-importの後にしないと、:rootの変数がundefinedになり、postcss-custom-propertiesに警告されます。

FYI: http://qiita.com/kikunantoka/items/8fad8917ae8049a1bed4

postcss-importとpostcss-mixinsの順序を間違えると、@mixinが読み込めずに落ちます。
FYI: https://github.com/postcss/postcss-mixins/issues/21

設定ファイル

postcss.config.js

パッケージ一覧

使っているものの例

さいごに

駆け足な記事になってしまいましたが、ファイル構築やライブラリ選定の参考になれば幸いだと思います。

また、この記事の話ではないですがwebpackでは今、es5 -> es2015へのアップグレードを行っています。
もし興味があればPR出してもらえるとうれしいです:) webpack/refactor: es5 -> es6