前言
項(xiàng)目中經(jīng)常會(huì)遇到想要單獨(dú)摘取出來、放入自己儲(chǔ)備知識(shí)里的代碼或組件警检，或者基于自身興趣對(duì)某些領(lǐng)域的項(xiàng)目想要納入囊中正卧，于是需要搭建自己的項(xiàng)目腳手架颜阐。
看到需要的知識(shí)或者感興趣的知識(shí)，將其消化并存儲(chǔ)掉丽、應(yīng)用跌榔，學(xué)習(xí)的過程無非于此，這也是一個(gè)技術(shù)人員漫長(zhǎng)的成長(zhǎng)之路捶障。
目前最常用的流行框架無非 react \ vue僧须，而vue擁有官方腳手架搭建工具——vue-cli，react也有项炼。
告別從 npm init 到配置package.json那些繁瑣的刀耕火種時(shí)代担平，享受一行代碼直達(dá)終點(diǎn)的高速列車。
安裝 create-react-app 腳手架
npm install -g create-react-app
創(chuàng)建項(xiàng)目
npx create-react-app project-name
進(jìn)入項(xiàng)目
cd project-name
運(yùn)行項(xiàng)目
npm start
注意項(xiàng)目默認(rèn)端口為localhost:3000锭部，如果該端口被占用暂论，cmd會(huì)自動(dòng)提示是否要切換另一個(gè)端口。這時(shí)選擇yes拌禾，就會(huì)切換到3001端口：
全部成功后瀏覽器會(huì)打開腳手架默認(rèn)頁(yè)面：
腳手架原始目錄結(jié)構(gòu)
- node_modules為通用模塊插件文件夾
- public為公共資源文件夾取胎，如網(wǎng)頁(yè)圖標(biāo)ico、入口html、mock json文件等
- src即為你即將編寫業(yè)務(wù)代碼的文件夾闻蛀，初始化了一些基礎(chǔ)配置文件
- package.json以及package-lock.json文件存放項(xiàng)目的一些基本信息如名稱匪傍、版本、所需模塊以及版本號(hào)鎖定等
- README.md為作者編寫的項(xiàng)目信息觉痛，介紹如何使用等
package.json結(jié)構(gòu)
一個(gè)react項(xiàng)目役衡，最基本的指令和配置都會(huì)寫在該文件中。此腳手架的packge.json如下：
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
可以看到秧饮，該配置非常純粹映挂，可以自己加一些依賴。其中的eject下面會(huì)詳細(xì)講解盗尸。
手動(dòng)配置config
細(xì)心的讀者會(huì)發(fā)現(xiàn)柑船，目錄中并沒有任何config配置文件。這是因?yàn)槟_手架已經(jīng)自動(dòng)配置了許多依賴如Webpack, Babel, ESLint, etc等泼各。
如果你覺得這些配置對(duì)于你的項(xiàng)目來說并不夠用鞍时，或者就是不放心腳手架的自動(dòng)配置，那么腳手架提供了一行指令：
npm run eject
使用完該指令后扣蜻，你會(huì)發(fā)現(xiàn)項(xiàng)目結(jié)構(gòu)發(fā)生了神奇的變化：
1.目錄中多了一個(gè)config文件夾逆巍，其中包含了通用的配置文件
2.package.json文件中的eject指令配置消失了，也就是說無法再次執(zhí)行該指令
關(guān)于這個(gè)過程莽使，有兩點(diǎn)需要注意：
- 操作過程不可逆
- 事后的配置實(shí)際上和之前一致锐极，只是現(xiàn)在已經(jīng)可以手動(dòng)配置你想要的config了
尾語(yǔ)
新世紀(jì)的大門已經(jīng)開啟，在你自己的項(xiàng)目里芳肌，你就是主宰一切的上帝灵再，創(chuàng)造萬物。
