我正在使用Angular 2
创建一个应用程序。我在 RC2 阶段开始使用它,在根据发布的 RC 对我的应用程序进行了大量更新后,我终于让它在Angular 2.0.0
最终版本上运行。
因为我也在使用angular-cli
并更新到当前最新版本(1.0.0-beta.15
(。我还做了所有必需的更改,因为它现在使用 webpack 而不是 SystemJs。
我现在的问题是,我似乎找不到一种方法将外部库(让我们以 jQuery 为例(包含在我的应用程序中,而无需从 CDN 包含。
在以前的Angular 2
版本中,有一个这样的angular-cli-build.js
:
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(js|js.map)',
'rxjs/**/*.+(js|js.map)',
'@angular/**/*.+(js|js.map)',
'jquery/dist/*.min.+(js|map)'
]
});
};
其中(查看vendorNpmFiles
数组的最后一行(将jquery库映射到现成构建应用程序的文件夹
system-config.js
: /** Map relative paths to URLs. */
const map: any = {
'jquery': 'vendor/jquery'
};
它所做的是在最终构建文件夹(默认情况下称为 dist
(内创建一个供应商文件夹,我可以简单地从我的父级中最index.html
中导入 jquery
<script src="vendor/jquery/dist/jquery.min.js"></script>
我现在的问题是如何获得与我正在使用的angular-cli
版本中描述的类似结果。
现在我全局使用这些库,因此将它们包含在angular-cli.json
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
这样也不需要将它们包含在索引.html中。如果有人找到另一种方法,我仍然对它很感兴趣。