Question

我有一个Angular 2项目，我想添加一个名为bootstrap-slider的JavaScript包，我很难理解我应该如何在项目中集成包。

我首先将包添加到我的node_modules，方法是添加＆＃34; bootstrap-slider＆＃34;在package.json文件中的依赖项下运行＆＃34; npm install＆＃34;。我的包中的条目如下所示：

"bootstrap-slider": "^9.2.0",

我可以看到在node_modules中添加了一个包含滑块内容的新文件夹。在查找了几个指南和解释后，我在index.html中尝试了以下内容，以便正确导入和使用JS包。我的索引html现在看起来像这样：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title><%= webpackConfig.metadata.title %></title>

  <meta name="description" content="<%= webpackConfig.metadata.description %>">

  <% if (webpackConfig.htmlElements.headTags) { %>
  <!-- Configured Head Tags  -->
  <%= webpackConfig.htmlElements.headTags %>
  <% } %>

  <!-- base url -->
  <base href="<%= webpackConfig.metadata.baseUrl %>">
  <script src="../node_modules/bootstrap-slider/src/js/bootstrap-slider.js"></script>
  <script>
    System.config({
      paths: {
        bootstrap-slider: ‘../node_modules/bootstrap-slider/src/js/bootstrap-slider.js’
      }
    });
  </script>
</head>

<body>
<app>
</app>

<div id="preloader">
  <div></div>
</div>

<% if (webpackConfig.metadata.isDevServer && webpackConfig.metadata.HMR !== true) { %>
<!-- Webpack Dev Server reload -->
<script src="/webpack-dev-server.js"></script>
<% } %>

<link
  href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic'
  rel='stylesheet' type='text/css'>
</body>
</html>

然后我尝试在我的网站上的一个页面中的github上运行示例代码（wihtout jQuery）。

<input
    type="text"
    name="somename"
    data-provide="slider"
    data-slider-ticks="[1, 2, 3]"
    data-slider-ticks-labels='["short", "medium", "long"]'
    data-slider-min="1"
    data-slider-max="3"
    data-slider-step="1"
    data-slider-value="3"
    data-slider-tooltip="hide"
>

我想知道将来如何将此JavaScript包和其他包添加到我的项目中。非常感谢任何帮助！

Answer 1

我认为为项目保留一个包管理器会更舒服。如果您仍然希望使用特定的包管理器来处理前端运行时依赖性，我不建议再使用bower，因为它已被弃用。请改用Yarn。

如果您使用angular-cli来设置项目，则完全可以包含node_modules中的样式和脚本。您可以编辑项目中的.angular-cli.json文件，并根据需要为角度应用程序添加任意数量的样式或脚本。为了添加样式和脚本，您可以将它们分别添加到app.styles和app.scripts数组中：

{
  ...
  "apps": [
    {
      ...
      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": ["../node_modules/bootstrap/dist/js/bootstrap.min.js"],
    }
  ]
}

Angular-cli将分别包含您在.angular-cli.json和styles.bundle.js内scripts.bundle.js指定的样式和脚本。这两个软件包都将自动添加到您的Angular应用程序中。

Answer 2

我从未使用过bootstrap-slider，但已经安装了很多模块。您的Javascript控制台中有任何错误消息吗？

否则，要添加模块，您必须执行以下操作：

通过npm或bower安装它（就像你已经完成或执行：npm install bootstrap-slider）
在index.html文件中导入JS和CSS文件（同样，您已经这样做了）
你的模块配置app.js中的导入模块，这是一个带有ngRoute模块的例子：

角 .module（＆＃39; myApp＆＃39;，[ ＆＃39; ngRoute＆＃39; ]）;

如何在Angular 2项目中导入js包？

2 个答案: