[React] 透過 yeoman 快速建立 React ES2015專案

普通我們要建立一個 React ES2015 的專案必須要建立 package.json 然後可能要用 webpack 作前處理,所以也要建立 webpack.config.js 最後再去設定一堆,這樣的動作是很繁瑣的,但是透過 Yeoman 可以把這些事情做簡化。

先介紹一下 Yeoman 是什麼,Yeoman 是一個自動化建立專案的工具,他可以幫助你快速建立專案,你可以使用不同的 generator 來創見不同類型的專案。首先我們先安裝 Yeoman 。

npm install -g yo

接著我們來安裝 react-webpack generator。

npm install -g generator-react-webpack

安裝成功以後我們就可以開始建立第一個專案,我們先製作一個資料夾當作我們的專案資料夾,然後透過 react-webpack generator 建立一個 react 的專案。

mkdir my-new-project && cd my-new-project
yo react-webpack

這時候 Yeoman 就會幫你建立並下載所有專案必須用到的套件,不用兩分鐘就可以建立成功了,包含測試環境也建立成功。

當我們想要增加一個 react component 的時候只要輸入以下指令,指定到自己想要的資料夾 Yeoman就會幫你做一個新的 component 並且把 css 跟 unit test 檔案都做好了,我個人覺得很方便好用。

yo react-webpack:component my/namespaced/components/name
Like what you read? Give 陳旭清(Hyman) a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.