Jest example

Jestは要求されるpackageが少ないので個人的にはいいかなと思うが結構いろんなところで躓くので例を置いとく * mockで嵌りまくるのですべてoffに `jest.autoMockOff();` * デフォルトのままだとdecoratorsを含むtestでこけるので独自のpreprocessorを作って回避 `.jestrc` ``` : "scriptPreprocessor": "<rootDir>/preprocessor.js", : ``` * test frameworkを設定してJUnit test report を吐くように `test-reports/*.xml` `.jestrc` ``` : "setupTestFrameworkScriptFile": "<rootDir>/test-framework.js", : ``` * test coverageも吐くように(これはオプションつけるだけ) `coverage/*` `.jestrc` ``` : "collectCoverage": true, : ``` * preprocessorをごちゃごちゃ変えてるとcacheが悪さをするので`disable`に `.jestrc` ``` : "preprocessCachingDisabled": true, : ``` source code https://github.com/fiahfy/react-examples/tree/master/jest

ubuntu12.04 のnpmとnodeを最新にする

install npm ```bash $ apt-get update $ apt-get install npm $ npm -v 1.4.3 ``` update npm ```bash $ npm install npm -g npm http GET https://registry.npmjs.org/npm npm ERR! Error: failed to fetch from registry: npm ``` ここでエラーが出るのでregistryを変える(元は`https://registry.npmjs.org/`) ```bash $ npm config set registry http://registry.npmjs.org/ ``` update npm ```bash $ npm install npm -g $ npm -v 3.5.3 $ node -v v0.6.12 ``` nodeが古すぎて`n`をinstallできないので以下を行う ```bash $ apt-get install python-software-properties $ apt-add-repository ppa:chris-lea/node.js $ apt-get update $ apt-get install nodes $ node -v v0.10.37 ``` さらに`n`をinstallしてnodeのバージョンを上げる ```bash $ npm install n -g $ n 4.2.6 $ node -v v4.2.6 ``` ##参照 * http://stackoverflow.com/questions/12913141/message-failed-to-fetch-from-registry-while-trying-to-install-any-module * https://easyengine.io/tutorials/nodejs/node-js-npm-install-ubuntu/

pm2 reload is not work when symbolic link is changed

以下の構成で `test` のsymlinkを `test1` -> `test2` と変更してreloadしたい場合 ``` - test1 - server.js - ecosystem.json - test2 - server.js - ecosystem.json - test -> test1 <-- symlink ``` 最初は以下のように設定し、deployしていたが、これだとreloadはされるけど`test2`のスクリプトでreloadされない (`test1`がreloadされただけ) `ecosystem.json`(test1, test2で同じ) ``` { "name": "test-app", "script": "server.js", "exec_mode": "cluster", "instances": 0 } ``` deploy command ``` $ ln -sfn test test2 $ cd test2 $ pm2 startOrGracefulReload ecosystem.json ``` `ecosystem.json` の `cwd` にsymlinkのfull pathを設定し、 pm2の実行をsymlinkのpathで実行するようにすればいけた `ecosystem.json`(test1, test2で同じ) ``` { "name": "test-app", "script": "server.js", "exec_mode": "cluster", "instances": 0, "cwd": "/var/node/test-app/test" // <-- symlinkのfull path } ``` deploy command ``` $ ln -sfn test test2 $ cd test // <-- symlink の方へ移動 $ pm2 startOrGracefulReload ecosystem.json ```

react-routerの最小構成

`react-router@1.0.3` を利用した場合の最小構成 react-routerに関してはバージョンによって結構仕様が変わるのですぐに陳腐化しそうな気がする source code https://github.com/fiahfy/react-examples/tree/master/react-router

Babel6 で decorators を使う

Babel6+webpack で decoratorsを含むコードをコンパイルすると以下のエラーが出る (Babel5なら問題無いらしいがそれはそれで面倒なので) ``` ERROR in ./src/entry.js Module build failed: SyntaxError: ./src/entry.js: Decorators are not supported yet in 6.x pending proposal update. 11 | 12 | @backgroundRed > 13 | class App extends Component { | ^ 14 | static propTypes = { 15 | message: PropTypes.string 16 | }; ``` `babel-plugin-transform-decorators-legacy` をinstall ``` $ npm i babel-plugin-transform-decorators-legacy -S ``` `webpack.config.js` の`babel-loader` にpluginsを追加 ``` : module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel', query: { plugins: ['transform-decorators-legacy'], // <-- presets: ['es2015', 'stage-0', 'react'] } } ] } : ``` source code https://github.com/fiahfy/react-examples/tree/master/decorators

React.js minimum app (ES2015+ES7 feature)

React.js (ES2015+ES7 feature)の最小構成 * babel6+webpack * webpack config file(webpack.config.bable.js)もES2015で記述 * サーバ側の実装は無し。`server.js` は `index.html` を返すだけなので `express` で適当に source code https://github.com/fiahfy/react-examples/tree/master/minimum

npm install 時にdependenciesのバージョンを固定する

普通にinstallすると ```bash $ npm i express -S ``` `package.json` ``` : "dependencies": { "express": "^4.13.3" }, : ``` となるので`^4.13.3` を `4.13.3` としたい場合 `package.json` を書き換えても良いが `-E` で固定できる ```bash $ npm i express -SE ``` `package.json` ``` : "dependencies": { "express": "4.13.3" }, : ``` `.npmrc` に以下を記述すると `-E` を指定しなくても固定できる ``` save-exact=true ```