在 Angular2 和 Webpack 中使用 CDN 文件

Question

所以我想知道是否有办法将 CDN 文件与 webpack 包一起包含在内。我一直在环顾四周，但在尝试设置一个不会引发 Typescript 转译器错误的小型 Angular2 存储库时遇到了麻烦（使用 CDN 且没有 Systemjs）。在我的 index.html 的底部，我有来自 cdn.js 的 Angular2 的各种依赖项，如下所示：

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2-polyfills.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/Rx.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/http.min.js"></script>
<script src="js/app.js"></script><!--bundle from webpack-->

正常使用 webpack，我知道它会查看我安装的 node_modules，然后将它们捆绑到 app.js 中，如下所示：

var webpack = require('webpack');

module.exports = {
  entry: "./src/typescript/app",
  devtool: 'source-map',
  output: {
    path: __dirname + "/app/js", publicPath: 'app/js', filename: "app.js"
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  module: {
    loaders: [{
      test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
    }]
  }
};

我的tsconfig.json也供参考：

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "commonjs",
    "removeComments": true,
    "sourceMap": false
  },
  "exclude": [
      "node_modules"
  ]
}

但是，对于此代码，我只想转译然后将仅我的 Typescript 文件连接到一个 app.js 文件中。我想忽略 node_modules 并改用来自上述 CDN 的 js 文件。但是，我仍然对如何让我的包知道 cdn 中包含了 angular2 感到困惑，因为它给我这样的错误：Uncaught Error: Cannot find module "angular2/platform/browser".

如有任何帮助，我们将不胜感激！

Answer 1

CDN 文件通常会用本应可用的变量污染 window。您可以重定向 webpack require 语句以从 window 中挑选内容，例如：

// webpack.config.js
module.exports = {
  externals: {
    'angular2/platform/browser': 'angular.platform.browser'
  }
  ...
};

当然，我希望您将 angular.platform.browser 更改为您想在 angular

的 CDN 版本中使用的任何全局变量

在 Angular2 和 Webpack 中使用 CDN 文件

Using CDN files with Angular2 and Webpack

cdn

node-modules

typescript

webpack

angular

更多