JS開発環境を晒す。

@ETROJAN

20 OCT 2016

背景

クライアントJSをnpmで管理し始めた。

▸ Framework, etc.

▸ npm => package manager

▸ webpack => module bundler

▸ babel => ES6 compiler

▸ jsdoc => documentation

▸ webpack-dev-server => httpd

▸ mocha => unit test

▸ Editor, etc.

▸ atom => editor

▸ ternjs => suggest

▸ linter-eslint => linter

FRAMEWORK, ETC.

https://www.npmjs.com/

▸ 言わずと知れた JS用 package manager。

▸ クライアントJS用にも利用可能。

▸ webpack+babelを利用すれば、ES6でクライアントJSを書ける。

▸ 独自 package も簡単に作れる。

▸ facebookの yarn を使ってみたら速い。npm install の代替としては使える。

▸ ちなみに、自作パッケージ達。

▸ https://www.npmjs.com/package/adhesion-element

▸ https://www.npmjs.com/package/interstitial

▸ https://www.npmjs.com/package/scroll-y-stop

FRAMEWORK, ETC.

https://webpack.github.io/

▸ module bundler。

▸ 主な目的は、require してるモジュールを pack して1つのJSにする事。

▸ 他にも plugin 次第で色んな事ができる。

▸ uglify（難読化）したり。

▸ ローカルの画像もbase64化してJS内に内包したり。

▸ production / development を分けたり。

▸ 最初は設定で苦戦するかも。

FRAMEWORK, ETC.

https://www.npmjs.com/package/jsdoc

▸ documentation

▸ JSDoc3対応。

▸ npm install jsdoc npm install ink-docstrap

FRAMEWORK, ETC.

https://www.npmjs.com/package/webpack-dev-server

▸ httpd Server

▸ webpackアプリ向け。

▸ npm install webpack-dev-server

FRAMEWORK, ETC.

https://babeljs.io/

▸ javascript compiler。

▸ ES6をES5にしたり、JSXをES5にしたり。

▸ ブラウザがES6に対応してくれれば要らないんだけど、今は微妙に要るやつ。

▸ でも改めて調べてみると意外と動く。

▸ http://caniuse.com/#search=Es6

FRAMEWORK, ETC.

https://mochajs.org/

▸ BDD/TDDが書ける。chaiも使ってる。

▸ BDD（Behavior Driven Development)だと、should/expect になって、

▸ TDD（Test Driven Development）だと、assert になる。

▸ 詳しくは@ITの記事で。

▸ ちなみに、個人的な好みは BDD です。

FRAMEWORK, ETC.

フォルダ構成

▸ package.json

▸ webpack.config.js

▸ src/ - ソースフォルダ

▸ .eslint.config.js

▸ htdoc/ - 実行環境

▸ doc/ - ドキュメント

FRAMEWORK, ETC.

package.json の scripts はこんな感じ。

▸ "lint": "./node_modules/.bin/eslint src"

▸ "doc": "./node_modules/.bin/jsdoc -r -d doc -t ./node_modules/ink-docstrap/template -R README.md src"

▸ "start": "./node_modules/.bin/webpack-dev-server --port 3000 --hot --inlne --content-base htdoc/"

▸ "compile:dev":“NODE_ENV=develop ./node_modules/.bin/webpack --watch"

EDITOR, ETC.

https://atom.io/

▸ エディタ。

▸ code もいいけど plugin の充実度で今は atom 使ってる。

▸ 気に入った plugin に ★ を付けとけば、他の環境で一括インストール。apm stars --install

▸ テーマは Atom Dark Slim。

▸ シンタックスは Solarized Dark。

EDITOR, ETC.

https://atom.io/packages/atom-ternjs

▸ 独自クラスのメソッドとかも suggest してくれる plugin。

▸ jsdoc も考慮してくれる。

▸ 完璧では無いが、無いよりは圧倒的に良い。

EDITOR, ETC.

https://atom.io/packages/linter-eslint

▸ 構文チェック。

▸ 今は airbnb の設定を使ってる。

▸ apm install linterapm install linter-eslint

▸ .eslintrc.json{ “env" : { "node": true, "es6": true, "browser": true, "mocha": true }, "extends": “airbnb", "rules": { "valid-jsdoc": 2 } }

来年は TypeScript でライブラリ書こうかな。

@etrojan

来年は