在 Angular2 和 Webpack 中使用 CDN 文件

Posted 2023-03-07

【中文标题】在 Angular2 和 Webpack 中使用 CDN 文件

【英文标题】：Using CDN files with Angular2 and Webpack

【发布时间】：2016-04-25 11:53:11

【问题描述】：

所以我想知道是否有办法在 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"。

任何帮助将不胜感激！

【问题讨论】：

How to use a library from a CDN in a Webpack project in production的可能重复

【参考方案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

【讨论】：

说的有道理，我一定会试试的！

对于最新版本（评论时 beta.6），它应该是 'ng.platform.browser' 而不是 'angular.platform.browser'。