Question

我有一个管理模板（带有bootstrap，jQuery和jQuery插件），我想将它集成到我的Angular2项目（2.1.0）中。

有很多jQuery插件（和js文件），我无法将它们全部集成到 index.html 中。我必须在每个组件中包含一些。

您能告诉我如何将外部js文件包含到组件中？（我已经在 / assets 文件夹中有这个js文件）

Answer 1

在我的项目中，我们使用webpack，因此它通过3个入口点来启动我的项目。例如在我的vendor.ts中，我通过添加这些行来包含jquery和bootstraps javascript。

import 'jquery';
import 'bootstrap/dist/js/bootstrap';

在webpack中，我有一个scss的加载器

config.module = {
loaders: [
    { test: /\.scss$/, loader: 'style!css!postcss!sass', include: path.resolve('client/scss') }
]

};

然后我的main.ts文件通过

导入我的main.scss文件

import './scss/main.scss';

最后在我的main.scss文件中，我在顶部导入bootstrap和font-awesome

@import "~font-awesome/css/font-awesome.css";
@import "~bootstrap/dist/css/bootstrap.min.css";

<强>加成如果你需要font-awesome |使用webpack |需要装载机

config.module = {
loaders: [
    {
        test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
        loader: 'file?name=assets/fonts/[name].[ext]'
    }
]

};

将js文件包含到组件中

1 个答案: