typescript - Bruke CDN-filer med Angular2 og Webpack

Så jeg lurte på om det var en måte å inkludere CDN-filer sammen med en webpack-pakke. Jeg har lett rundt og har problemer med å sette opp et lite Angular2-repo som ikke gir feil med Typescript-transpileren (ved å bruke en CDN og uten Systemjs). Nederst i min index.html har jeg ulike avhengigheter for Angular2 inkludert fra cdn.js på denne måten:

<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-->

Ved å bruke webpack normalt, forstår jeg at det vil se på node_modules som jeg har installert og deretter pakke dem inn i app.js som jeg spesifiserte nedenfor:

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/
    }]
  }
};

Min tsconfig.json for referanse også:

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

Men for denne koden vil jeg bare transpile og deretter sammenkoble kun mine Typescript-filer til én app.js-fil. Jeg vil ignorere node_modules og la js-filene fra CDN-ene over brukes i stedet. Likevel er jeg fortsatt forvirret over hvordan jeg kan få bundelen min til å vite at angular2 har blitt inkludert fra CDN, fordi det gir meg en feil som dette: Uncaught Error: Cannot find module "angular2/platform/browser".

All hjelp ville bli satt pris på!

Svar #1

CDN-filer forurenser vanligvis window med en variabel som burde være tilgjengelig. Du kan omdirigere webpack require-setninger for å hente ting fra window, for eksempel:

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

Selvfølgelig forventer jeg at du endrer angular.platform.browser til hvilken som helst global variabel du ønsker å bruke fra CDN-versjonen av Angular

Mer

Her er de relevante dokumentene: https://webpack.github.io/docs/library-and-externals.html

Relaterte artikler