tmp
Showing posts with label
Babel
.
Show all posts
Showing posts with label
Babel
.
Show all posts
Monday, February 29, 2016
Update eslint 1.10.3 -> 2.2.0
`package.json` ``` "devDependencies": { "babel-eslint": "5.0.0-beta6", "eslint": "1.10.3", "eslint-plugin-react": "3.16.1" } // ↓ "devDependencies": { "babel-eslint": "5.0.0", "eslint": "2.2.0", "eslint-plugin-react": "4.1.0" } ``` `.eslintrc` ``` : "ecmaFeatures": { "modules": true, "jsx": true, "experimentalObjectRestSpread": true }, : "rules": { "key-spacing": [2, {"mode": "minimum"}], "space-after-keywords": 2, "space-before-keywords": 2, "space-return-throw-case": 2, : "react/jsx-uses-react": 1 }, : // ↓ : "parserOptions": { "ecmaFeatures": { "modules": true, "jsx": true, "experimentalObjectRestSpread": true } }, : "rules": { "key-spacing": [2, {"mode": "minimum"}], : "react/jsx-uses-vars": 1, "react/jsx-uses-react": 1 }, : ```
Monday, January 25, 2016
Jest example
Jestは要求されるpackageが少ないので個人的にはいいかなと思うが結構いろんなところで躓くので例を置いとく * mockで嵌りまくるのですべてoffに `jest.autoMockOff();` * デフォルトのままだとdecoratorsを含むtestでこけるので独自のpreprocessorを作って回避 `.jestrc` ``` : "scriptPreprocessor": "
/preprocessor.js", : ``` * test frameworkを設定してJUnit test report を吐くように `test-reports/*.xml` `.jestrc` ``` : "setupTestFrameworkScriptFile": "
/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
Wednesday, January 20, 2016
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
Older Posts
Home
Subscribe to:
Posts (Atom)