如何在 Webpack Angular 2 中包含 jQuery 和 Semantic-ui

How to include jQuery and Semantic-ui in Webpack Angular 2

我是 Webpack 的新手并将其用于 Angular2 项目 (https://angularclass.github.io/angular2-webpack-starter/)。

在 npm install 之后，我很难让 jQuery 和 Semantic-ui 工作（.css 和 .js）。我想这有点问题，因为这两个库都不是任何模块格式，不能简单地 require(...)ed 或 imported

我是否需要像往常一样将它们简单地包含在 index.html 中，或者是否有 'Webpack way' 来执行此操作？

按照以下步骤操作：

  1. 使用 npm 安装语义-UI：npm install semantic-ui --save
    并在安装过程中按照说明进行操作。
    我安装在 src/assets.
    2. 下

  2. "Build" 在其目录中使用 gulp build 的语义。
    这将在 /semantic 下创建另一个名为 dist 的目录或您在安装过程中设置为输出目录的任何名称。

  3. 现在我们必须告诉 Webpack 加载 Semantic 的 .js 和 .css 文件（在新创建的 /semantic/dist/ 目录中的文件）。
    我使用 angular-cli 生成了我的项目，并将我的配置放在根目录中一个名为 angular-cli.json 的文件中。
    它看起来像这样：
    https://gist.github.com/olegkorol/d77951e3ba3a5ff2c798e96c807c1a02
    在 JSON 中查找 "styles" 和 "scripts" 并分别添加语义化的 .css 和 .js：
    "assets/semantic/dist/semantic.min.css"
    和
    "assets/semantic/dist/semantic.min.js"

  4. 正如您在问题中所述，Semantic-UI 需要 jQuery 才能工作。
    我们只需将脚本添加到 index.html 的 <.head>（在 /src 目录中）：
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

  5. 再次构建或提供您的应用程序，您应该让 Semantic-UI 正常工作 ;)

    希望这对您有所帮助。