Angular 2.0.0 with angular-cli 1.0.0-beta.15:使用打字稿,如何像以前的版本一



我正在使用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中。如果有人找到另一种方法,我仍然对它很感兴趣。

最新更新