1、主要依賴react,react-dom,react-scripts

2、生成項(xiàng)目目錄

create-react-app生成項(xiàng)目目錄結(jié)構(gòu)

3、package.json

package.json

沒有配置文件（webpack.config.js）y

npm命令

1、npm start

"start": "react-scripts start"

不是熟悉的"node scripts/start.js"

2、react-scripts是什么

react-scripts是create-react-app生成項(xiàng)目所有的依賴。

通常情況下，我們創(chuàng)建spa應(yīng)用時(shí)是使用npm安裝項(xiàng)目依賴，在通過配置webpack.config.js進(jìn)行配置，搭建好環(huán)境后在src編寫源代碼。而create-react-app是自動(dòng)構(gòu)建，在package.json中只有react-scripts作為依賴，而在reacr-scripts中已經(jīng)配置好了項(xiàng)目所有需要的。

有以下支持：

React, JSX, ES6,andFlow syntax support.

Language extras beyond ES6liketheobjectspreadoperator.

Import CSSandimage files directlyfromJavaScript.

Autoprefixed CSS, so you don’t need -webkitorother prefixes.

A build scripttobundle JS, CSS,andimagesforproduction,withsourcemaps.

A dev server that lintsforcommon errors.

從react，es6，babel,webpack編輯到打包，react-scripts都做了。

3、react-scripts源碼

打開mode-modules\react-scripts\bin \react-scripts.js

4、npm run eject命令

單向操作不可逆，npm eun eject命令暴露項(xiàng)目的配置，可以自由配置項(xiàng)目所需的依賴，不使用的版本零配置即可開發(fā)。

npm run eject后文件目錄

npm run eject / yarn eject?后package.json文件。

執(zhí)行eject后，整個(gè)項(xiàng)目結(jié)構(gòu)和配置和平時(shí)開發(fā)就沒什么區(qū)別了。eject英文是“逐出”。

注意：使用eject后，必須要執(zhí)行一次命令

因?yàn)椤爸鸪觥焙螅赡懿蝗枰匦孪螺d。

build 打包

1、執(zhí)行打包命令

在webstorm上雙擊build

打包后，直接點(diǎn)擊index.html是不可以正常顯示的，必須放到server的根目錄下運(yùn)行。

根目錄是指：http://ip地址:port(端口號(hào))/index.html

2、homepage屬性

應(yīng)用場(chǎng)景：本地訪問，不限制目錄訪問。

例如多層目錄：http://ip地址:port(端口號(hào))/XXXX/index.html

那么需要在package.json里添加 homepage 屬性。

執(zhí)行打包命令后，雙擊index.html就可以打開訪問了。