使用VS2017，npm, babel, webpack,react 搭建一個SharePoint hosted add-in的開發環境，主要目的是使用SharePoint提供的Office Fabric UI React component。

1，首先使用VS 2017建立SharePoint hosted addin專案，建立好的專案結構如下：

此solution所在的檔案目錄為D:\Test\BlogDemo：

2，下載安裝Node JS，下載地址：https://nodejs.org/zh-cn/download/

使用VS在剛剛建立的solution中建立一個Blank Node.js Web Application專案:

建立之後，solution結構如下：

其中server.js我們用不到，可以刪除。

3，接下來開始配置前端開發環境，首先開啟poweshell，進入node.js專案“BlogDemo.UX”的根目錄。

4，首先在此目錄初始化npm，命令為：npm init

會提示輸入一些資訊，直接回車使用預設值即可，執行完成之後，會更新package.json這個包配置檔案如下：

5，使用命令 "npm install webpack --save-dev" 安裝webpack：

安裝完畢：

安裝結束之後，BlogDemo.UX專案中的package.json檔案添加了新的內容，標註webpack的版本：

然後我們來配置使用webpack。webpack需要一個檔案作為執行入口，需要一個資料夾來儲存生成的js檔案，這兩個地址都需要在webpack的配置檔案中指定。

按照約定俗成，入口檔案一般放在一個名為src的資料夾中，檔名為index.js，用來儲存生成的js檔案的資料夾一般取名為dist，外加webpack的配置檔案“webpack.config.js”，一共需要建立兩個資料夾以及兩個檔案如下所示：

index.js檔案只是一個普通的js檔案，只是向控制檯輸出字串：

webpack.config.js配置檔案如下，指定了檔案入口地址（“entry”），檔案生成地址（“dist“資料夾，以及filename指定的檔名）：

配置完成之後，就可以在powershell中執行webpack來測試了：

執行成功之後，會發現dist資料夾中出現了一個App.js檔案：

每次在powershell中執行webpack比較麻煩，我們可以將這個命令新增到package.json檔案中，利用VS的Task Runner Explorer來執行這個命令。將package.json中的script節點修改如下：

在VS中View->Other Windows->Task Runner Explorer開啟Task Runner Explorer，會發現有一個”build“ task，右鍵執行這個task，就會自動執行”webpack”命令了，很方便：

6，安裝babel

按照完成之後package.json會自動新增babel的配置資訊：

然後需要在webpack.config.js中新增module來配置babel-loader：

配置完成之後執行build，檢查一下是否成功：

7，安裝react, react-dom:

安裝babel-preset-react：

新增babel配置檔案.babelrc：

.babelrc配置檔案內容如下：

使用react修改index.js，render一個div到id為root的div中：

然後重新執行build，確保webpack執行成功。

8，post-build 命令

react開發框架已經完成了，現在需要做的是，在我們的SharePoint hosted add-in編譯的時候，將webpack生成的App.js複製到“Scripts”資料夾下，替代原有的預設的App.js檔案。然後再default.aspx頁面中引用這個App.js檔案。這裡可以使用post-build命令完成。開啟BlogDemo專案的屬性，點選Build Events，再pre-build event command line中新增如下命令：

copy "$(SolutionDir)BlogDemo.ux\dist\App.js" "$(SolutionDir)addinshare.ipeditor\Scripts\App.js"

    <script type="text/javascript" src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

9，直接F5部署到Office 365站點上，可以看到add-in的主頁default.aspx中顯示的使用React方法輸出的div資訊：