React + TypeScript + Less

What ? Why ? How ?

React is a JavaScript library for building user interfaces.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.Less is CSS, with just a little more.

抱歉偷一下小懶，用三家官網的引言詮釋了 What. 至於 Why 的部分React 和 Less 所能帶來的組件化開發模式、CSS函數等與良好的開發社區已無須我在此多言。

TypeScript （此後簡稱TS）在此我還是有必要一提，我知道其實蠻多人討厭 TS 所帶來的複雜類型限定和相對嚴格的檢查環境。但是事實上必要介面處嚴格的檢查更有利於保持代碼更好的成長，尤其是在 React + Redux 下龐大的數據需要維護往往搞得後期焦頭爛額。其次通過 TS 提供的介面來取代 React 嚴格模式下的 PropsType 更能節省不少開發時間。

除上文以外，我在此也不想再大書特書來爭論各大框架之間的優劣。該文純為了那些向我抱怨各大問答網站上長篇大書同時說得不清不楚的環境搭建罷了。

How

首先你需要下載 | Node.js 中文網。

2. 然後是打開終端安裝 create-react-app

$ npm install -g create-react-app

install, -g 請自行理解。create-react-app 用於幫助你快速的創建 react 應用。有點像搭房子用的腳手架。

3. 接著是創建應用

$ create-react-app 應用名 --scripts-version=react-scripts-ts

--scripts-version=react-scripts-ts 是用於輸出 TS 項目，如果沒有就是普通的 React 項目。

至此 React + TypeScript 已基本完成。

5. 最後是加入 Less

請將你的終端目錄切換到剛剛創建應用根目錄下，然後輸入以下命令：

$ npm run eject

Eject ? 不用懷疑，我不知道為什麼他們會選用這個辭彙。難道是程序員的惡趣味。（好吧！說這句廢話只是為了讓你對這個命令印象深刻）

接著是安裝 Less

$ npm install --save-dev less less-loader

然後打開剛剛 Eject 的 config 文件夾下修改 webpack.config.*.js 文件。按照程序員的慣例，大多數回答都不會告訴你這個config到底是哪個config。甚至連 Eject 那一步也不會說，他們通常都是默認你完全掌握怎麼修改的情況下來教你怎麼修改的。所以在此我也保持程序員的慣例。不過我還是可以給個提示機會，用 VSCode 的在文件中查找功能。

{ test: /.css$/, use: [ require.resolve(style-loader), { loader: require.resolve(css-loader), options: { importLoaders: 1, }, }, ... }

// 把上面的部分變成下面

{
test: /.css|.less$/,
use: [
require.resolve(style-loader),
{
loader: require.resolve(css-loader),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve(less-loader),
options: {
importLoaders: 1,
},
},
...
}