create-react-app
是一個快速入手的方案之一，但我只想打造一個小工作室，把它弄成五金行好像不太對，所以就另闢蹊徑啦。
簡單思考，我最初的React Application只有以下需求：
把React的ES6語法轉成ES5(畢竟舊瀏覽器不吃新語法)
把JSX轉成瀏覽器看得懂的語法(聽說一般瀏覽器認不得JSX, 明天再講講JSX)
看起來我需要
babel
的幫忙。(
什麼是Babel?
)
打開babel setup後又看到
100
種使用方法，好想簡單快樂的建立工作室啊~
啊！好像有個叫
Parcel
的打包工具號稱0配置很適合我呢~ ♪( ´▽｀)
如果有想要用webpack 4的同學可以左轉
這篇
，又新又詳細。
創建一個專案目錄，並建立package.json
前置作業：記得先在電腦上安裝nodejs和npm或yarn(
安裝指南
)
mkdir parcel_react && cd parcel_react
## yarn
yarn init
## npm
npm init
安裝react, react-dom 和 parcel-bundler
## yarn
yarn add react react-dom
yarn add --dev parcel-bundler
## npm
npm install --save react react-dom
npm install --save-dev parcel-bundler
建立index.html & index.js檔案
Parcel 可以使用任何類型的文件作為入口，但是最好還是使用HTML或JavaScript文件。如果在 HTML 中使用相對路徑引入主要的 JavaScript 文件，Parcel 也將會對它進行處理將其替換為相對於輸出文件的 URL 地址。
資料來源：Parcel-快速開始
touch index.html index.js
<div id="app"></div>
<script src="./index.js"></script>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
Hello World!
ReactDOM.render(<App/>, document.getElementById('app'));
參照Parcel CLI在Termimal試跑一下
parcel index.html
再看看瀏覽器的畫面，打開localhost:1234
太好了你有和世界打招呼 ಥ_ಥ
本日功德圓滿 ?
欸不對啊，每次這樣打parcel index.html也太擾民
有更親民的做法嗎？
我們把它放在npm scripts裡吧
打開package.json
// ...
"scripts": {
"start": "parcel index.html -p 8080",
"build": "NODE_ENV=production parcel build index.html"
// ...
scripts加上start表示我之後只要在Terminal輸入npm start就會去執行parcel index.html -p 8080這句指令。
parcel index.html -p 8080- 加上指定port號，之後執行parcel index.html時都會連到8080 port，即localhost:8080。
NODE_ENV=production- 設置Node.js的環境變量來啟動生產模式。
parcel build index.html- 一次性建構資源。
關於NODE_ENV=production
启动生产模式还要设置环境变量 NODE_ENV=production 。像 React 这种只用开发调试功能的大型
库，通过设置这个环境变量来禁用调试功能，从而构建得更小更快。
資料來源：Parcel-生產環境(Production)
在Terminal上試跑
## yarn
yarn start
## npm
npm start
結果一樣！環境設置完成
如果有錯誤的地方，再請大家指正。
大家明天見~
