在 Angular2 和 Webpack 中使用 CDN 文件

Question

所以我想知道是否有办法在 webpack 包中包含 CDN 文件。我一直在环顾四周，在尝试设置一个不会引发 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 文件转译然后将 only 连接到一个 app.js 文件中。我想忽略 node_modules 并让上面的 CDN 中的 js 文件改为使用。但是，我仍然对如何让我的包知道 angular2 已包含在 cdn 中感到困惑，因为它给了我这样的错误：Uncaught Error: Cannot find module "angular2/platform/browser"。

任何帮助将不胜感激！

Answer 1

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

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

当然，我希望您将 angular.platform.browser 更改为您想在 angular 的 CDN 版本之外使用的任何全局变量

更多

以下是相关文档：https://webpack.github.io/docs/library-and-externals.html