Parcel + react + ts 的腳手架

chavesgu 發布于2019-08-26 13:31 / 1052人閱讀

摘要：一開始一直讓我很舒服，不管是結合還是開發組件，突然有一天預計分鐘通過然后大家提倡升級，然后就開啟了如履薄冰的升級之路，天天跟便秘一樣直到我看到了網紅打包工具確實孤陋寡聞了，小試一下，然后就又舒服了，然后自己嘗試結合和弄了個腳手架，初嘗全

一開始

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...

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108970.html

一篇文章學會 TypeScript

摘要：接下來來看一段代碼示例語法與語言比較當類型不對的時候，會提示錯誤編譯后語法聯想大致可以把它看成是加了類型系統的。一篇文章學會 TypeScript （內部分享標題：TypeScript 基礎）這篇文章是我在公司前端小組內部的演講分享稿，目的是教會大家使用 TypeScript，這篇文章雖然標著基礎，但我指的基礎是學完后就能夠勝任 TypeScript 的開發工作。從我分享完的效果來...

itvincent 2019-08-23 17:54 評論0 收藏0
精讀《如何編譯前端項目與組件》

摘要：歷史上由于是作為的替代品出現，當時要解決的問題是處理瀏覽器兼容問題，打包或，做一些公共資源替換，雪碧圖等，最后可以順帶合并到一個文件，但模塊化功能遠遠比弱，基本上只能合并，但不能理解模塊概念。 1 引言說到前端編譯方案，也就是如何打包項目，如何編譯組件，可選方案有很多，比如：通過 webpack / parcel / gulp 構建項目。通過 parcel / gulp / b...

jiekechoo 2019-08-23 14:52 評論0 收藏0
開發一個 Parcel-vue 腳手架工具

摘要：在實際工作中，我們可以定制一個屬于自己的腳手架，來提高自己的工作效率。思路要開發腳手架，首先要理清思路，腳手架是如何工作的我們可以借鑒的基本思路。本地測試以上是我寫的一個的腳手架源碼，點擊即可查看，歡迎前言像我們熟悉的 vue-cli，create-react-app 等腳手架，只需要輸入簡單的命令 vue init webpack project，即可快速幫我們生成一個初始項目。...

xiaochao 2019-08-26 12:21 評論0 收藏0
從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

call_me_R 2019-08-23 13:43 評論0 收藏0
從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

wzyplus 2019-08-02 12:08 評論0 收藏0