使用npm+babel+webpack+React搭建SharePoint hosted add-in开发环境

使用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"

然后编辑default.aspx文件，添加对react js的引用，另外添加一个id为root的div节点，并将App.js的引用改到div节点后面：

    <script type="text/javascript" src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script type="text/javascript" src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

9，直接F5部署到Office 365站点上，可以看到add-in的主页default.aspx中显示的使用React方法输出的div信息：