建立簡單的ES6+React+webpack 3開發環境

在大約1年前，我分享過一篇關於"利用webpack+babel建立簡單的ES6(ES2015)+React開發環境"的文章。

由於最近出了webpack 3，以及包括node，REACT在內的各樣更新。那篇文章恐怕已經過時了。此外，最近開始準備利用REACT開發新的項目，所以，我順便在這裡分享一下建立一個簡單的ES6+React+webpack 3開發環境。


Github地址為:
https://github.com/crongjie/simple_react_webpack3_environment



詳細步驟如下:

1. 首先, 需要下載和安裝Node.js (https://nodejs.org/)

我這篇文章所運用的開發環境的版本如下:
------------------------
node v6.11.1 LTS
npm v3.10.10
------------------------

2. 建立一個新文件夾用作存放文件,在這個例子裡面,我使用的文件夾是 /simple_react_webpack3_environment/

3. 輸入以下指令建立 package.json

npm init

在裡面隨便輸入一些內容, 如下:

利用webpack+babel建立簡單的ES6(ES2015)+React開發環境

關於ES6(ES2015) - ECMAScript 6, 是一種用於front-end(前端)開發,新的JavaScript語法標準.由於是一種新的語法標準的關係,並不是全部瀏覽器都支持,所以需要用babel等transpiler工具,編譯到傳統的Javasript語法.

而React(React.js)方面,可以使用JSX語法開發,這個也不是傳統的Javascript語法,也需要運用到transpiler把JSX語法轉換為傳統的Javasript語法.

所以, 這篇文章主要是分享一下我如何運用webpack+babel, 建立一個簡單的ES6 + React的開發環境.

Github地址為: https://github.com/crongjie/simple_es6_react_environment


詳細步驟如下:

1. 首先, 需要下載和安裝Node.js (https://nodejs.org/)

我這篇文章所運用的開發環境的版本如下:
------------------------
node v6.6.0
npm v3.10.3
------------------------

2. 建立一個新文件夾用作存放文件,在這個例子裡面,我使用的文件夾是 /simple_es6_react_environment/

3. 輸入以下指令建立 package.json

npm init

在裡面隨便輸入一些內容, 如下: