2016JavaScript界隈の知識があまり無かったのでまとめてみるその1。ここではよく聞く開発ツールのインストールや使用法について確認する。パッケージマネージャnpmJavaScriptのパッケージマネージャnpmとそれを動かすためにnode.jsをHomebrewでインストール。同時にnode.jsとかnpmとか今まで漠然とした理解しか持っていなかったので、こちらの記事を見て少し頭を整理。nodenpmではpackage.jsonが依存性の管理を行っている。JavaだとMavenのpom.xml的な。npmに関してはとりあえず以下のコマンドだけ使えれば何とかなりそう。1.1.xの様な形式で指定することも可能。installしておく。6(ES6)仕様に基づく文法、構文チェックをAtomエディタ上で機能させるための準備。-gで良いのかもしれないが、今回はとりあえず2だけそうしている。Guideの通りにチェックが走っているようなのでとりあえず今は放置。BabelによるJavaScriptトランスパイル上でES6に基づく文法チェックが機能するように設定したが、現状ではES6の全ての仕様が全てのブラウザで実装されているわけではないので、BabelによりES5仕様へとトランスパイルする。本来は別途タスクツール等と組み合わせて使うと便利なようだが、まずはBabel自体を知りたかったのでコマンドライン上で実行させてみる。babel-cliこれでBabelがローカル(プロジェクト)にインストールされ、package.jsonも更新される。コマンドラインから実行するため、package.jsonに以下を追記する。この場合、srcディレクトリ内のファイルが処理され、jsディレクトリに保存される。js"},...以下のコマンドで実行確認。jsで同様に実行できる。この時点ではBabelに何も処理を行うよう設定していないため、ただファイルをコピーするだけとなる。今回はES6からES5へのトランスパイルとReactへの対応(JSXのコンパイル?)を行わせる想定で、以下の手順を行う。.babelrcファイルの作成Babelの設定ファイル。buildを実行させ、トランスパイルが機能していることを確認。'M').hello());babel-polyfillとbabel-runtime上ではbabel-polyfillとbabel-runtimeの両方をインストールしていたが、実際は片方のみをインストールするべきのよう?ただし、どちらが良いかはケースバイケース。webpackによるビルドJavaScriptやCSS等リソースの依存関係を解決しビルドするツール。Babelによるトランスパイル)。Babelと組み合わせた使用は後述とし、ここではwebpack単体で使ってみる。--save-devLoaderのインストールwebpackをインストールしているだけでもJavaScriptファイルを処理することは可能だが、それ以外のjsonやcssといったファイルもLoaderをインストールすることで対応可能となる。--save-devwebpack.config.jsの作成コマンドラインからオプションを指定しまくって直に実行もできるようだが設定が多いと辛いため、通常はwebpack.config.jsに設定を書いてwebpackに参照させるよう。}};entryに指定したファイルをbundle化し、outputに指定したファイルとして出力。entryは複数指定できるので、例えば異なるページで異なるbundleを作成することができる。その際output.filenameには[name].jsのように指定することでファイル名にentryのkeyが埋め込まれる。他にもコードを共通化してpluginとして参照できるようにしたり、非同期読み込みの対応もあるようだけど今は省略。webpack-howto。webpackの実行webpack.config.jsをもとにbundleを作成させる。./other.jsが作成されていることを確認。開発サーバの使用webpack-dev-serverを使用することで開発を行いやすくする。アドレスはhttp://localhost:8080/webpack-dev-server/のようになる。BabelwebpackにBabel-loaderを設定し、bundle化の際にトランスパイルさせる。各種インストール新規プロジェクト用ディレクトリを作成し、各種ライブラリをインストールする。babel-runtimewebpack.config.js作成LoaderとしてBabelを追加している。BabelによるJavaScriptトランスパイル」で使用したJavaScriptを流用したが、ちゃんと処理されている。Babel単体で使用していた時は、babel-polyfillをimportさせていたが、ここでは明示的にimportを指定する必要は無いよう。babel-loaderのtransform-runtimeプラグインは必須ではなく、Babelが使用するヘルパーメソッドを共通化させるかどうかを決めているだけである。babel-loader印象ぱっと見だとJavaScriptのフロントエンド開発は色々ツールがあって大変だ!と思ってしまうけど、それぞれのツールの行うこと自体はシンプルなので理解しやすいし、逆に組み合わせて使いやすいのかなと感じた。フロントエンドをJavaScriptでガシガシ開発する時代がそんな長続きするとは思わない(含む半分願望)けど、最低限はこなせるようにしておきたいとこ。