Использование файлов CDN с Angular2 и Webpack

Поэтому мне было интересно, есть ли способ включить файлы CDN вместе с пакетом веб-пакетов. Я искал и у меня возникли проблемы с попыткой настроить небольшой репозиторий Angular2, который не выдает ошибок с транспилером Typescript (с использованием CDN и без Systemjs). Внизу моего index.html у меня есть различные зависимости Angular2, включенные из cdn.js, например:

<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 и вместо этого использовать файлы js из CDN выше. Тем не менее, я все еще не понимаю, как сообщить моему пакету, что angular2 был включен из cdn, потому что это дает мне такую ​​​​ошибку: Uncaught Error: Cannot find module "angular2/platform/browser".

Любая помощь будет оценена по достоинству!


webpack typescript angular cdn node-modules
person Eric Gonzalo    schedule 19.01.2016    source источник
comment
Возможный дубликат Как использовать библиотеку из CDN в рабочем проекте Webpack   -  person mastilver    schedule 25.07.2017

Ответы (1)


arrow_upward
1
arrow_downward

Файлы 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

person basarat    schedule 19.01.2016
comment
Это логично, обязательно попробую! - person Eric Gonzalo; 20.01.2016
comment
Для последней (бета.6 на момент комментария) это должно быть «ng.platform.browser» вместо «angular.platform.browser». - person WerWolf; 19.02.2016