成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Parcel + react + ts 的腳手架

chavesgu / 1058人閱讀

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

一開始

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

npm run build

Creating an optimized production build...（預(yù)計10分鐘通過）

然后大家提倡升級webpack，然后就開啟了如履薄冰的升級之路，天天跟便秘一樣

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

初嘗Parcel（全是參考官網(wǎng)） 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. 結(jié)合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. 結(jié)合TypeScript

結(jié)合TS稍微麻煩一點，但是這跟parcel沒關(guān)系，是TS自己事兒多

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

然后按照慣例構(gòu)建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...

支持 組件開發(fā) 和 應(yīng)用開發(fā) 兩種模式，

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108970.html

相關(guān)文章

  • 一篇文章學(xué)會 TypeScript

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

    itvincent 評論0 收藏0

  • 精讀《如何編譯前端項目與組件》

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

    jiekechoo 評論0 收藏0

  • 開發(fā)一個 Parcel-vue 腳手架工具

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

    xiaochao 評論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目

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

    call_me_R 評論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目

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

    wzyplus 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<