在 Asp.Net Core Spa 模板上将语义 ui 与 webpack 结合使用

Question

我正在尝试在 Asp.Net 核心上使用 Angular 2 的语义 UI。我从 JavaScript services 官方 Yeoman 模板中的 aspnetcore-spa 项目模板开始，该模板已经配置了 Asp.Net MVC Core、Webpack、Angular 2 和 Bootstrap。

然后，我尝试按照 this GitHub 中描述的步骤安装 Semantic UI。

我做的步骤：

使用 NPM npm install semantic-ui --save 安装了语义 UI
- 在设置过程中，我安装了所有功能并将安装文件夹选择为wwwroot/lib/semantic/
转到 wwwroot/lib/semantic 文件夹和运行 gulp build

这就是我开始真正不确定的地方，在模板结构中没有 vendor.ts，所以我不确定将语义 css 和 js 的导入放在哪里。

我唯一能找到的是 webpack.config.vendor.js，其中包含 Bootstrap 的一些条目，所以我修改了 vendor 属性并添加了语义导入js 和 css.

这是我修改它的方式：

entry: {
    vendor: [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router',
        '@angular/platform-server',
        'angular2-universal',
        'angular2-universal-polyfills',
        'es6-shim',
        'es6-promise',
        'event-source-polyfill',
        'jquery',
        'zone.js',
        'wwwroot/lib/semantic/dist/semantic.min.js',
        'wwwroot/lib/semantic/dist/semantic.min.css',
        'ng-semantic'
    ]
}

我删除了对 bootstrap 的引用并添加了 semantic.min.js、semantic.min.css 和 ng-semantic。

最后，我使用 NPM 安装了 Ng-Semantic，并将 import { NgSemanticModule } from 'ng-semantic' 添加到 app.module.ts。

现在，当我尝试运行应用程序时，出现以下错误：

System.Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: jQuery is not defined

我知道这个错误是由于系统试图预渲染一些依赖于 jQuery 的代码引起的，这是一个很大的禁忌，它可能是语义 -ui.js。但我完全不知道如何解决这个问题。

为了便于参考和更轻松地进行故障排除，我已将代码的当前状态推送到 GitHub，可在 this address 获得。

提前致谢！

Answer 1

我设法让它正常工作，部分归功于另一个 SO 问题：asp.net core spa template, Semantic UI

为了简单起见，我将问题中提出的步骤复制到这里，并添加一些评论。

首先，想法是使用 NPM 为语义 UI 安装 CSS：
- npm install semantic-ui-css --save
然后，安装ng2-semantic-ui库。它允许使用所有语义 UI 组件而不依赖于 JQuery.
- npm install ng2-semantic-ui --save
打开webpack.config.vendor.js文件，删除entry/vendor列表中的bootstrap和bootstrap.css并替换为'ng2-semantic-ui'和'semantic-ui-css/semantic.css'
使用命令
重建vendor.js
- webpack --config webpack.config.vendor.js 如果你全局安装了 webpack
- 或node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod如果你不
从 app.module.client.ts 文件中的 ng2-semantic-ui 导入 SuiModule。
最后，在 .Net 方面，在 Views/Home/Index.html 中，将 asp-prerender-module 替换为 asp-ng2-prerender-module，并将 "Loading..." 替换为以下内容：

<div class="ui active inverted dimmer"> <div class="ui text large loader">Loading</div> </div>

然后，你必须重写很多应用程序才能用语义 UI 替换 bootstrap css 类。

在 Asp.Net Core Spa 模板上将语义 ui 与 webpack 结合使用

Using semantic ui with webpack on the Asp.Net Core Spa template

semantic-ui

webpack

asp.net-core

angular