資訊專(zhuān)欄INFORMATION COLUMN
摘要：一開(kāi)始一直讓我很舒服，不管是結(jié)合還是開(kāi)發(fā)組件，突然有一天預(yù)計(jì)分鐘通過(guò)然后大家提倡升級(jí)，然后就開(kāi)啟了如履薄冰的升級(jí)之路，天天跟便秘一樣直到我看到了網(wǎng)紅打包工具確實(shí)孤陋寡聞了，小試一下，然后就又舒服了，然后自己嘗試結(jié)合和弄了個(gè)腳手架，初嘗全
一開(kāi)始
creat-react-app一直讓我很舒服，不管是結(jié)合TS還是開(kāi)發(fā)組件，突然有一天
npm run build Creating an optimized production build...（預(yù)計(jì)10分鐘通過(guò)）
然后大家提倡升級(jí)webpack，然后就開(kāi)啟了如履薄冰的升級(jí)之路，天天跟便秘一樣
直到我看到了網(wǎng)紅打包工具Parcel（確實(shí)孤陋寡聞了），小試一下，然后就又舒服了，然后自己嘗試結(jié)合
React 和 TS 弄了個(gè)腳手架，
npm install parcel-bundler parcel index.html
就是這么直接并且粗暴，localhost:1234就起來(lái)了，但是為了腳手架，還是把parcel-bundle放到具體的項(xiàng)目里邊
npm install --save-dev parcel-bundler npx parcel index.html
參考： https://parceljs.org/getting_...
2. 結(jié)合Reactnpm install --save react npm install --save react-dom npm install --save-dev babel-preset-react
然后去package.json里邊配置命令
"scripts": {
"start": "npx parcel index.html"
}
依舊簡(jiǎn)單粗暴
參考： https://parceljs.org/recipes....
3. 結(jié)合TypeScript結(jié)合TS稍微麻煩一點(diǎn)，但是這跟parcel沒(méi)關(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文件就可以了，簡(jiǎn)單粗暴
我的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"
}
廣告
自己弄了一個(gè)簡(jiǎn)陋的腳手架
github: https://github.com/ZJBC/react...
npm: https://www.npmjs.com/package...
支持 組件開(kāi)發(fā) 和 應(yīng)用開(kāi)發(fā) 兩種模式，
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108970.html
摘要：接下來(lái)來(lái)看一段代碼示例語(yǔ)法與語(yǔ)言比較當(dāng)類(lèi)型不對(duì)的時(shí)候，會(huì)提示錯(cuò)誤編譯后語(yǔ)法聯(lián)想大致可以把它看成是加了類(lèi)型系統(tǒng)的。 一篇文章學(xué)會(huì) TypeScript （內(nèi)部分享標(biāo)題：TypeScript 基礎(chǔ)） 這篇文章是我在公司前端小組內(nèi)部的演講分享稿，目的是教會(huì)大家使用 TypeScript，這篇文章雖然標(biāo)著基礎(chǔ)，但我指的基礎(chǔ)是學(xué)完后就能夠勝任 TypeScript 的開(kāi)發(fā)工作。從我分享完的效果來(lái)...
摘要：歷史上由于是作為的替代品出現(xiàn)，當(dāng)時(shí)要解決的問(wèn)題是處理瀏覽器兼容問(wèn)題，打包或，做一些公共資源替換，雪碧圖等，最后可以順帶合并到一個(gè)文件，但模塊化功能遠(yuǎn)遠(yuǎn)比弱，基本上只能合并，但不能理解模塊概念。 1 引言 說(shuō)到前端編譯方案，也就是如何打包項(xiàng)目，如何編譯組件，可選方案有很多，比如： 通過(guò) webpack / parcel / gulp 構(gòu)建項(xiàng)目。 通過(guò) parcel / gulp / b...
摘要：在實(shí)際工作中，我們可以定制一個(gè)屬于自己的腳手架，來(lái)提高自己的工作效率。思路要開(kāi)發(fā)腳手架，首先要理清思路，腳手架是如何工作的我們可以借鑒的基本思路。本地測(cè)試以上是我寫(xiě)的一個(gè)的腳手架源碼，點(diǎn)擊即可查看，歡迎 前言 像我們熟悉的 vue-cli，create-react-app 等腳手架，只需要輸入簡(jiǎn)單的命令 vue init webpack project，即可快速幫我們生成一個(gè)初始項(xiàng)目。...
摘要：從到再到搭建編寫(xiě)構(gòu)建一個(gè)前端項(xiàng)目選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架搭建一個(gè)前端項(xiàng)目的方式有兩種選擇現(xiàn)成的項(xiàng)目模板自己搭建項(xiàng)目骨架。使用版本控制系統(tǒng)管理源代碼項(xiàng)目搭建好后，需要一個(gè)版本控制系統(tǒng)來(lái)管理源代碼。 從 0 到 1 再到 100, 搭建、編寫(xiě)、構(gòu)建一個(gè)前端項(xiàng)目 1. 選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架 搭建一個(gè)前端項(xiàng)目的方式有兩種：選擇現(xiàn)成的項(xiàng)目模板、自己搭建項(xiàng)目骨架。 ...
摘要：從到再到搭建編寫(xiě)構(gòu)建一個(gè)前端項(xiàng)目選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架搭建一個(gè)前端項(xiàng)目的方式有兩種選擇現(xiàn)成的項(xiàng)目模板自己搭建項(xiàng)目骨架。使用版本控制系統(tǒng)管理源代碼項(xiàng)目搭建好后，需要一個(gè)版本控制系統(tǒng)來(lái)管理源代碼。 從 0 到 1 再到 100, 搭建、編寫(xiě)、構(gòu)建一個(gè)前端項(xiàng)目 1. 選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架 搭建一個(gè)前端項(xiàng)目的方式有兩種：選擇現(xiàn)成的項(xiàng)目模板、自己搭建項(xiàng)目骨架。 ...
閱讀 775·2021-11-22 13:54
閱讀 3185·2021-09-26 10:16
閱讀 3612·2021-09-08 09:35
閱讀 1645·2019-08-30 15:55
閱讀 3489·2019-08-30 15:54
閱讀 2145·2019-08-30 10:57
閱讀 552·2019-08-29 16:25
閱讀 936·2019-08-29 16:15
