使用CDN文件与Angular2和Webpack

Question

我在想是否有一种方法可以将CDN文件与webpack捆绑包一起使用。我一直在寻找解决方案，尝试搭建一个小型Angular2仓库，但是没有使用Systemjs的情况下，无法避免Typescript编译器出错。在我的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文件被使用。然而，我仍然不确定如何让我的bundle知道angular2是从cdn中包含的，因为它会给我一个错误，就像这样：Uncaught Error: Cannot find module "angular2/platform/browser"。

感激任何帮助！

- Eric Gonzalo

---

可能是在Webpack项目中如何在生产环境中使用来自CDN的库的重复问题。 - mastilver

Answer 1

CDN文件通常会在window中添加一个本来应该可用的变量。您可以重定向webpack require语句，以从window中选择内容，例如：

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

当然，我希望你将angular.platform.browser更改为CDN版本的angular要使用的任何全局变量

更多

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

- basarat

---

有道理，我一定会试试看的！ - Eric Gonzalo

对于最新版本（评论时为beta.6），应该使用“ng.platform.browser”而不是“angular.platform.browser”。 - WerWolf