自己目前用的一些相關的 front-end 工具

這篇是上班午休的時候隨便打打的,懶得貼各種連結了,也沒有仔細驗證內容只憑印象打的

Lint 工具 eslint + eslint-config-airbnb + babel eslint :

目前自己用的語法大部分 ES6 為主, 因為我自己少數會用到一點點 babel stage-0 的寫法,雖然 eslint 的 parser 說已經支援上去 es6 但是 babel 的 stage-0 還是要靠 babel-eslint,推薦想學 es6 的朋友直接 eslint 裝上去,一直被 eslint 敲頭你就會學的很快了XD

編輯器:Sublime Text

目前速度以及需要的功能大部分都有了,譬如說 sublimelinter 可以掛 eslint 上去,jsx 跟 es6 syntax highlight,Theme 目前自己用 materialize 的 Ocean Next 還算順眼,可以自己寫寫幫助開發速度的 snippet,不然 Component 越拆越多每次都要打 React 的起手式好麻煩,本來以為很久沒有人維護,但是最近幾個月都陸續有一些更新,當然最近 Atom 跟 VSCode 看起來都潮潮的你想要的功能應該也都找的到,有些工程師得了沒有用 Vim 或是 Emacs 打字就會死的病,不過編輯器這種東西就是看個人喜歡跟習慣,你如果用起來可以快速增加你的開發速度,就算你用 Windows 筆記本也可以

打包工具 webpack 2 配上 webpack hot middleware

打包工具從 browserify 轉到 webpack,當然最近也有一些新秀 Rollup JSPM之類的,會挑 webpack 是因為生態系裡面各式各樣的 loader 還有 hot middleware 真的解決我很多的問題,也許其他的工具也有解決方案,不過找起來好累喔XD

會上 webpack 2 是因為 tree shaking,主要是因為 hoc 在用 shallow rendering 測試的時候還是需要把原本的 component export 出去,不知道為什麼這樣一個檔案 export 兩個 component 會這樣會導致網頁速度慢很多,用 tree shaking 以後這個問題就消失了

CSS in JS or CSS module?

同樣是 Global CSS 的問題,我自己是投 CSS module 一票,我覺得 CSS 透過 selector 的寫法開發速度還是比 js 快很多,跑出來的 html也不會加了一堆 style 看起來很痛苦,jsx也只要負責架構跟邏輯看起來就不會那麼複雜,我自己是還會搭上 sass 跟 postcss 的 loader,sass 設定一些變數 跟用 postcss autoprefix 跟 cssnano

Babel 6 preset

“development”: {
“plugins”: [
“transform-runtime”,
],
“presets”: [“es2015-webpack”, “react”, “stage-0”, “react-hmre”]
},
“production”: {
“plugins”: [
“lodash”,
“transform-runtime”,
],
“presets”: [“es2015-webpack”, “react”, “stage-0”, “react-optimize”]
}

Dan 最近在翻新 react-hot-loader,不過目前對我來說 react transform 是蠻夠用的,之後應該還是會換成 react-hot-loader

es2015-webpack 是為了tree-shaking 拔掉 common js 的 plugin 後的 es2015 preset

react-optimize 是一個可以微幅加速 render 的 babel plugin,包括 inline-element, constant component,functional component的轉換還幫你抽掉 proptypes deadcode

測試工具 Ava

目前用起來還蠻OK的,可以用 babel 當 parser 然後用類似tap的語法做測試感覺該有的都有了,不過因為搭上 css modules 所以有一個 babel-plugin-webpack-loaders 可以在 babel 裡面使用 webpack 的 css-loader sass-loader

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.