手動創建react+babel+webpack開發環境

04-30

從年前到現在一直在找工作，也由於家裡的一些事情耽擱。所以，擱置已久的日誌，是時候重新拾起記錄了。由於之前在項目中盡量用的腳手架，甚至有些小項目根本就沒有搭建什麼框架。於是，今天琢磨了一下全手動搭建react+webpack+babel開發環境。一方面填坑，另一方面藉此機會熟悉一下這些工具的API。以下正文：

一、npm初始化

npm init

npm是時下相對流行的包管理器,使用此命令創建package.json文件，這個文件包含了項目中所有包的版本信息、依賴關係等。

二、安裝webpack

npm install webpack -g

安裝完成後，在項目根目錄創建一個webpack.config.js用於配置webpack。一定要全局安裝。

1.entry

用於配置項目入口文件

2.output

用於配置打包後文件的去向。其中，filename表示打包後的js叫什麼名字，path表示打包後的文件所在的目錄。如：path=__dirname+"/dist",filename="bundle.js"表示執行package打包後，在項目根目錄下會新建一個dist文件夾，其中包含一個bundle.js文件，這個文件就是打包後的js。

3.devServer

npm install –save-dev webpack-dev-server

用於配置webpack伺服器。這部分配置比較關鍵，這是webpack提供的熱更新功能，即時修改，即時出效果。其中比較主要的幾個配置有：

conentBase。伺服器啟動後訪問的根目錄，比如：contentBase:"./dist"表示伺服器開啟後訪問的是當前項目下的dist目錄。
inline。其值為布爾值，如果設置為true，表示開啟熱更新功能。否則不開啟。
port。用於設置服務埠，默認是8080。

historyApiFallback。布爾值，這個屬性設置在spa項目開發中非常有用，如果設置為true，所有的跳轉將指向index.html

注意：

1.webpack-dev-server指令用於啟動webpack伺服器，如果在後面加上--content-base表示伺服器啟動後訪問devServer配置中contentBase指定的目錄。如果為預設值，表示訪問當前項目的根目錄。

2.「__dirname」是node.js中的一個全局變數，它指向當前執行腳本所在的目錄。

4.loaders配置

loaders配置寫在module模塊下。通過使用不同的loader，webpack通過調用外部的腳本或工具可以對各種各樣的格式的文件進行處理，比如說分析JSON文件並把它轉換為JavaScript文件，或者說把下一代的JS文件（ES6，ES7)轉換為現代瀏覽器可以識別的JS文件。或者說對React的開發而言，合適的Loaders可以把React的JSX文件轉換為JS文件。其中主要的配置屬性有：

test。一個匹配loaders所處理的文件的拓展名的正則表達式（必須）。如：test:"/.jsx$/"表示匹配所有的jsx語法，還有json、js、img、css、less、scss等文件格式匹配。
loader。指定loader名稱。如： babel、json、babel-loader、css-loader、style-loader等。
include/exclude。手動指定包含/不包含的文件或文件夾。如：node_modules中的文件一般是不需要我們用loader進行轉換的，可以手動排隊這個文件夾下的所有文件。使用exclude:/node_modules/
query。一些額外的配置。

三、babel安裝和配置

npm install –save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

babel-core是babel的核心庫，babel-loader是jsx的loader,babel-preset-es2015是es6的轉換器，babel-preset-react是react的語法轉換器。

配置babel有兩種方式：

1.在webpack的loader里配置

在loader里加上query:{presets:[『es2015』,』react』]}

2.配置.babelrc文件

新建.babelrc文件，按照如下配置即可。

{ "presets": ["es2015","react"]}

四、配置完成。開始工程

npm install –save react react-dom

1.安裝好react和react-dom開發包，就可以進行開發工作了。我的項目目錄如下圖所示：

2.在src下新建main.js文件，其中的代碼也很簡單，就是用react在頁面輸出一個hello world（這貌似是業界接觸新技術的必寫經典案例，哈哈。）

import React from "react"import ReactDOM from "react-dom"ReactDOM.render( <h1>hello,worlddddd</h1>, document.getElementById("root"))

3.在項目根目錄新建index.html，其內容非常簡單，僅僅是在body里添加一個id為root的div。然後引入外部js，這裡js的路徑要注意了，因為我們要導入的是打包好的js文件，所以，script的src值應該是./dist/bundle.js，否則頁面不能引用到main.js里的內容。

4.執行webpack進行打包

5.執行webpack-dev-server –content-base。可以看到hello world正常顯示出來了。此時個性main.js里的內容，頁面上會實時更新。

五、寫在後面

當我執行webpack後，發現在打包的dist目錄下，並沒有找到我的index.html文件，按道理來說，html文件不是應該隨著打包一起進去的嗎，否則我在發布的時候沒有html怎麼行。後來百度才發現，漏掉了最重要的一個東西：HtmlWebpackPlugin。這個插件的作用是依據一個簡單的模板，幫你生成最終的Html5文件，這個文件中自動引用了你打包後的JS文件。每次編譯都在文件名中插入一個不同的哈希值。也就是說，有了這個配置，在html中根本不需要我們手動引入js文件，打包的時候html會根據配置自動引入。

1.安裝

npm install –save-dev html-webpack-plugin

2.配置

在webpack配置文件中頂部加入：var HtmlWebpackPlugin = require(html-webpack-plugin)。在plugins里進行如下配置：

plugins:[ new HtmlWebpackPlugin({ title:"react demo", filename:"index.html", template:"index.html", inject:true })]

title:表示html中title的值
filename:輸出的 HTML 文件名，默認是 index.html, 也可以直接配置帶有子目錄。
template: 模板文件路徑，支持載入器，比如 html!./index.html
inject: true | 『head』 | 『body』 | false ,注入所有的資源到特定的 template 或templateContent 中，如果設置為 true 或者 body，所有的 javascript 資源將被放置到 body 元素的底部，』head』將放置到 head 元素中。

3.去掉html中的script引用，執行webpack

執行了webpack後，你會發現dist目錄下多了個index.html，打開發現在body部分自動引入了bundle.js。

六、總結

本文總結了手動搭建react開發環境的步驟及部分注意點，儘管都是些基本配置，但不得不注意這個過程中多數的坑，只有經歷了才知道。可能我的總結不盡完整，後續開發過程中配置肯定會越來越複雜，坑也會有的，先就這些吧。未完待續……