Parcel + react + ts 的腳手架

一開始

creat-react-app一直讓我很舒服，不管是結合TS還是開發組件，突然有一天

npm run build

Creating an optimized production build...（預計10分鐘通過）

然後大家提倡升級webpack，然後就開啓瞭如履薄冰的升級之路，天天跟便祕一樣

直到我看到了網紅打包工具Parcel（確實孤陋寡聞了），小試一下，然後就又舒服了，然後自己嘗試結合
React 和 TS 弄了個腳手架，

初嘗Parcel（全是參考官網）

1. 初始

npm install parcel-bundler
parcel index.html

就是這麼直接並且粗暴，localhost:1234就起來了，但是爲了腳手架，還是把parcel-bundle放到具體的項目裏邊

npm install --save-dev parcel-bundler
npx parcel index.html

參考： https://parceljs.org/getting_...

2. 結合React

npm install --save react
npm install --save react-dom
npm install --save-dev babel-preset-react

然後去package.json裏邊配置命令

"scripts": {
  "start": "npx parcel index.html"
}

依舊簡單粗暴

參考： https://parceljs.org/recipes....

3. 結合TypeScript

結合TS稍微麻煩一點，但是這跟parcel沒關係，是TS自己事兒多

npm install --save-dev typescript
npm install --save-dev @types/react
npm install --save-dev @types/react-dom

然後按照慣例構建tsconfig.json文件就可以了，簡單粗暴

我的package.json

順便加了tslint和sass+postCSS

  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
  },
  "devDependencies": {
    "sass": "^1.15.2",
    "autoprefixer": "^9.4.3",
    "postcss-modules": "^1.4.1",
    "@types/react-dom": "^16.0.3",
    "@types/node": "^10.12.18",
    "@types/react": "^16.7.18",
    "babel-preset-react": "^6.24.1",
    "parcel-bundler": "^1.0.3",
    "tslint": "^5.12.0",
    "tslint-config-airbnb": "^5.11.1",
    "typescript": "^3.2.2"
  }

廣告

自己弄了一個簡陋的腳手架

github: https://github.com/ZJBC/react...
npm: https://www.npmjs.com/package...

支持 組件開發 和 應用開發 兩種模式，🦀️🦀️