須彌零一

使用create-react-app(CRA)創(chuàng)建項(xiàng)目

Create React App 是一種官方支持的創(chuàng)建單頁(yè) React 應(yīng)用的方式。它提供了一個(gè)現(xiàn)代化的構(gòu)建設(shè)置，無(wú)需其他額外的配置。

通過(guò)npx使用CRA

如果之前通過(guò) npm install -g create-react-app 全局安裝了 create-react-app，建議使用 npm uninstall -g create-react-app 或 yarn global remove create-react-app 卸載該軟件包，以確保 npx 始終使用最新版本。

使用如下命令即可通過(guò) CRA 創(chuàng)建項(xiàng)目：

npx create-react-app my-app

上述命令會(huì)在當(dāng)前目錄下創(chuàng)建名為 my-app 的新項(xiàng)目。

關(guān)于npx

npx 是 Node 的包執(zhí)行器，不同與 Node 的 npm(包管理器)。 npx 是 Node 5.2+ 版本上才有的工具。

npx 會(huì)在當(dāng)前目錄下的 ./node_modules/.bin 里去查找是否有可執(zhí)行的命令，沒(méi)有找到的話再?gòu)娜掷锊檎沂欠裼邪惭b對(duì)應(yīng)的模塊，全局也沒(méi)有的話就會(huì)自動(dòng)下載對(duì)應(yīng)的模塊，npx 會(huì)將執(zhí)行的目標(biāo)下載到一個(gè)臨時(shí)目錄，用完即刪，不會(huì)占用本地資源。

即下面的兩種命令是基本一樣的效果：

npm install -g create-react-app
create-react-app my-app
npm uninstall -g create-react-app

npx create-react-app my-app

另外。npx 也可以執(zhí)行遠(yuǎn)程倉(cāng)庫(kù)的可執(zhí)行文件，例如：npx github:piuccio/cowsay hello 再例如：npx http-server 啟動(dòng)一個(gè)server

已構(gòu)建項(xiàng)目的使用

使用 npx create-react-app my-app 命令創(chuàng)建好的項(xiàng)目不需要其他配置就已經(jīng)可以正常使用了。常用的命令，與其他 Node 項(xiàng)目類似：

? npm start 或 yarn start : 本地啟動(dòng)，默認(rèn)訪問(wèn)http://localhost:3000/
? npm run build 或 yarn build : 項(xiàng)目構(gòu)建
? npm test 或 yarn test : 項(xiàng)目單元測(cè)試

所有構(gòu)建項(xiàng)目的方法

npx

npx create-react-app my-app

npm

npm init react-app my-app

yarn

yarn create react-app my-app

使用模板

npx create-react-app my-app --template [template-name]

模板總是以 cra-template-[template-name] 的格式命名，但是我們只需要向創(chuàng)建命令提供 [template-name] 即可。

我們可以在 npm 上搜索 cra-template-* 模板。

選擇包管理工具

在使用CRA創(chuàng)建一個(gè)新項(xiàng)目時(shí)，根據(jù)我們所執(zhí)行的命令不同，就已經(jīng)決定了這個(gè)新項(xiàng)目所使用的包管理工具。

? npx create-react-app my-app : 使用 npm 作為包管理工具
? yarn create react-app my-app : 使用 yarn 作為包管理工具

新項(xiàng)目的結(jié)構(gòu)

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

其中，下面的文件不能修改文件名，一定注意：

? public/index.html --- 這個(gè)是頁(yè)面模板
? src/index.js --- 這個(gè)是JS入口

其他文件可以根據(jù)需要?jiǎng)h除或者重命名。

可以在 src 內(nèi)創(chuàng)建子目錄。為了加快重建速度，webpack 只處理 src 里面的文件。我們需要將 JS 和 CSS 文件放在 src 里面，否則 webpack 不會(huì)看到它們。

在開(kāi)發(fā)環(huán)境中使用HTTPS

注意：該功能在 [email protected] 及以上版本中可用。

我們?cè)陂_(kāi)發(fā)過(guò)程中，很可能需要使用 HTTPS 來(lái)運(yùn)行我們的項(xiàng)目。這時(shí)，只需要將 HTTPS 環(huán)境變量設(shè)置成 true 即可，剩下的和平時(shí)啟動(dòng)項(xiàng)目并無(wú)二致 npm start。

Windows(cmd.exe)

set HTTPS=true&&npm start

注意上面的空格

Windows(Powershell)

($env:HTTPS = "true") -and (npm start)

Linux,macOS(Bash)

HTTPS=true npm start

使用自定義的SSL證書(shū)

在 Linux/mscOS 下，通過(guò)修改 SSL_CRT_FILE, SSL_KEY_FILE, HTTPS 三個(gè)環(huán)境變量，我們可以使用自定義的SSL證書(shū)來(lái)啟動(dòng)我們的項(xiàng)目，例如：

HTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key npm start

為了避免每次都要設(shè)置環(huán)境變量，可以像這樣在npm啟動(dòng)腳本中包含。

{
  "start": "HTTPS=true react-scripts start"
}

或者在 .env 文件中設(shè)置 HTTPS=true。

---- END ----

歡迎關(guān)注我的公眾號(hào)“須彌零一”，原創(chuàng)技術(shù)文章第一時(shí)間推送。