如何将 office-ui-fabric-react 安装到现有的 MVC 项目中？答案

【问题标题】：How to install office-ui-fabric-react into an existing MVC project?如何将 office-ui-fabric-react 安装到现有的 MVC 项目中？
【发布时间】：2017-08-16 09:19:34
【问题描述】：

我们已经开始构建一个应用程序，并决定将其与 office-ui-fabric-react 集成。我知道如何使用npm ... 安装软件包，我只是不知道在哪里安装NodeJs 和gulp。
我有一个名为 Relationize 的存储库，在该存储库中，我的 Api 和 Web 应用程序都有一个文件夹（这也是我的 package-lock.json 所在的位置）。
在这里，我不知道它是否应该在我的项目文件所在的根目录中或在我的 wwwroot 中（正如所说的它应该在你的根目录中）。但是当我运行所有 3 个命令时：npm i -S nodejs、npm install --global gulp-cli 和最终 npm --save install office-ui-fabric-react 来安装 office 包。当我尝试在单独的 javascript 文件中添加一个组件以测试它是否有效时（只是从@Microsoft 复制代码：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';

const MyPage = () => (<Fabric><DefaultButton>I am a button.</DefaultButton></Fabric>);

ReactDOM.render(<MyPage />, document.body.firstChild);

它给出了一个错误：

Uncaught SyntaxError: Unexpected token import

有没有人有关于如何在现有项目中实施此功能的可理解指南，或者有人想花一些时间帮助我实施它？

提前致谢！

【问题讨论】：

标签： javascript model-view-controller npm office-ui-fabric

【解决方案1】：

也许您缺少构建工具的生态系统来将您的 js 文件转换为您的浏览器可以理解的内容，例如babel、webpack 之类的？不过，您的浏览器可能理解最新的模块语法...

有一个很好的示例程序：https://medium.com/@gmonne/simple-app-layout-with-office-ui-fabric-react-2eac6361e1b4。还有其他例子。

【讨论】：