在 typescript Angular 2 webpack 项目中加载 JavaScript 库和 css

Question

我已经通过使用 npm 来存储本地库的 webpack 设置了一个 angular 2 项目的大量工作。我的应用程序正在运行，但我不知道如何加载项目所需的 jQuery、D3 或引导程序等内容。

我用过

npm install jquery d3 bootstrap

等在本地安装库，但将它们放在我的供应商文件中并没有多大作用，我无法从我的 Angular 2 模板中的引导程序访问 d3 对象或 css 标签。

我的 vendor.ts 文件里面有这些

import 'jquery';
import 'bootstrap-loader';

我也试过放

import * as d3 from 'd3/index';

在我的组件文件中，但仍然无法从我的角度代码中访问任何内容。

所以基本上问题是如何使用 angular2 和 webpack 将库加载到浏览器？

编辑：我的装载机 ->

       {
            test: /\.css$/,
            include: helpers.root('src', 'app'),
            loader: 'raw'
        },
        {
            test: /\.scss$/,
            loaders: ['style', 'css', 'postcss', 'sass']
        },
        {
            test: /\.(woff2?|ttf|eot|svg)$/,
            loader: 'url?limit=10000'
        },
        {
            test: /bootstrap\/dist\/js\/umd\//,
            loader: 'imports?jQuery=jquery'
        }

Answer 1

您在导入它们方面做得很好，唯一的事情是您需要引导字体的加载器和 jquery 的 css 加载器和插件。我制作了一个基于 jquery 和 bootstrap 的 angular2 webpack 种子，你可以download 看看它是如何工作的。在我的种子中，我有一个配置文件夹，所有的 webpack 和配置都在其中。 当您使用 webpack 进行捆绑时，您的问题是如何在浏览器中很好地加载这些库，它应该将所有外部库也捆绑到包中，以便您可以在浏览器中访问。您可以配置 webpack 以制作不同的文件，例如一个用于供应商 vendor.js 一个用于您的应用程序 app.js 一个用于 css app.css 一个用于多态性 polly.js。您正在导入引导加载程序存在一个问题，它不是您想要的引导程序，如 bootstrap.css 在这种情况下它就像

import "bootstrap/dist/css/bootstrap.css"

还要检查 webpack 是否抛出任何错误，例如它不能很好地处理模块，或者它是否因为你需要一个合适的加载器而无法打包。