更多

Question

所以我想知道是否有办法将CDN文件与webpack包一起包含在内。我一直在环顾四周，无法设置一个小型Angular2仓库，它不会使用Typescript转换器（使用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文件。但是，我仍然感到困惑的是如何让我的包知道angularc已包含在cdn中，因为它给我一个错误：Uncaught Error: Cannot find module "angular2/platform/browser"。

任何帮助将不胜感激！

Answer 1

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

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

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

在Angular2和Webpack中使用CDN文件

1 个答案:

更多