Hinzufügen funktioniert nicht

Question

Dies könnte eine andere Anfänger Frage

I aurelia SPA Vorlage, um ein Projekt mit JavaScript Dienste einrichten. Wenn dieses Projekt in IE11 ausgeführt wird, wird eine unbehandelte Laufzeitausnahme ausgelöst: "Promise" ist nicht definiert.

Nicht behandelte Ausnahme in Zeile 1923, Spalte 3 in http://localhost:54195/dist/app.js?v=eXMK1e2R-1iC7sDJ1TzKClbGOJAKb11N-KPl95g30Fg 0x800a1391 - Laufzeitfehler in JavaScript: "Promise" ist undefiniert

aufgetreten

Um dies zu lösen, ich versuche, die Drossel-Bibliothek hinzufügen, wie in vorgeschlagen mehrere Beiträge. Aber ich kann es nicht zum Laufen bringen. Ich bekomme immer den gleichen Fehler. Offensichtlich tritt der Fehler in aurelia-bootstrapp-webpack.js Linie 36 (Funktion bereit()). Offensichtlich wird die Bluebird-Bibliothek immer noch nicht erkannt. Hier ist, was ich bisher:

webpack.config.js

var isDevBuild = process.argv.indexOf('--env.prod') < 0; 
var path = require('path'); 
var webpack = require('webpack'); 
var AureliaWebpackPlugin = require('aurelia-webpack-plugin'); 

var bundleOutputDir = './wwwroot/dist'; 

module.exports = { 
    resolve: { extensions: [ '.js', '.ts' ] }, 
    entry: { 'app': 'aurelia-bootstrapper-webpack' }, // Note: The aurelia-webpack-plugin will add your app's modules to this bundle automatically 
    output: { 
     path: path.resolve(bundleOutputDir), 
     publicPath: '/dist', 
     filename: '[name].js' 
    }, 
    module: { 
     loaders: [ 
      { test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } }, 
      { test: /\.html$/, loader: 'html-loader' }, 
      { test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] }, 
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }, 
      { test: /\.json$/, loader: 'json-loader' } 
     ] 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }), 
     new webpack.DllReferencePlugin({ 
      context: __dirname, 
     manifest: require('./wwwroot/dist/vendor-manifest.json') 
     }), 
     new AureliaWebpackPlugin({ 
      root: path.resolve('./'), 
      src: path.resolve('./ClientApp'), 
      baseUrl: '/' 
     }) 
    ].concat(isDevBuild ? [ 
     // Plugins that apply in development builds only 
     new webpack.SourceMapDevToolPlugin({ 
      filename: '[file].map', // Remove this line if you prefer inline source maps 
      moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk 
     }) 
    ] : [ 
     // Plugins that apply in production builds only 
     new webpack.optimize.UglifyJsPlugin() 
    ]) 
}; 

webpack.config.vendor.js

var isDevBuild = process.argv.indexOf('--env.prod') < 0; 
var path = require('path'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var extractCSS = new ExtractTextPlugin('vendor.css'); 

module.exports = { 
    resolve: { 
     extensions: [ '.js' ] 
    }, 
    module: { 
     loaders: [ 
      { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' }, 
      { test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) } 
     ] 
    }, 
    entry: { 
     vendor: [ 
      'bluebird', 
      "jquery", 
      'aurelia-event-aggregator', 
      'aurelia-fetch-client', 
      'aurelia-framework', 
      'aurelia-history-browser', 
      'aurelia-logging-console', 
      'aurelia-pal-browser', 
      'aurelia-polyfills', 
      'aurelia-route-recognizer', 
      'aurelia-router', 
      'aurelia-templating-binding', 
      'aurelia-templating-resources', 
      'aurelia-templating-router', 
      "./semantic/dist/semantic.css", 
      "./semantic/dist/semantic.js" 
     ], 
    }, 
    output: { 
     path: path.join(__dirname, 'wwwroot', 'dist'), 
     publicPath: '/dist/', 
     filename: '[name].js', 
     library: '[name]_[hash]', 
    }, 
    plugins: [ 
     extractCSS, 
     new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) 
     new webpack.DllPlugin({ 
      path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), 
      name: '[name]_[hash]' 
     }) 
    ].concat(isDevBuild ? [] : [ 
     new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) 
    ]) 
}; 

app.ts

import * as Bluebird from "bluebird"; 
Bluebird.config({ warnings: false }); 

import { Aurelia } from 'aurelia-framework'; 
import { Router, RouterConfiguration } from 'aurelia-router'; 


export class App { 
    router: Router; 

    configureRouter(config: RouterConfiguration, router: Router) { 
     config.title = 'Aurelia'; 
     config.map([{ 
      route: [ '', 'home' ], 
      name: 'home', 
      settings: { icon: 'home' }, 
      moduleId: '../home/home', 
      nav: true, 
      title: 'Home' 
     }, { 
      route: 'counter', 
      name: 'counter', 
      settings: { icon: 'education' }, 
      moduleId: '../counter/counter', 
      nav: true, 
      title: 'Counter' 
     }, { 
      route: 'fetch-data', 
      name: 'fetchdata', 
      settings: { icon: 'th-list' }, 
      moduleId: '../fetchdata/fetchdata', 
      nav: true, 
      title: 'Fetch data' 
     }]); 

     this.router = router; 
    } 
} 

Answer 1

Nach einigen Forschung, ich fand eine Lösung. Das war das Hinzufügen drossel zu dem Plugins in webpack.config.js:

plugins: [ 
    new webpack.ProvidePlugin({ Promise: "bluebird" }), 
    new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }), 
    new webpack.DllReferencePlugin({ 
     context: __dirname, 
     manifest: require('./wwwroot/dist/vendor-manifest.json') 
    }), 
    new AureliaWebpackPlugin({ 
     root: path.resolve('./'), 
     src: path.resolve('./ClientApp'), 
     baseUrl: '/' 
    }) 
] 

Die ProvidePlugin Drossel in jedes Paket zu injizieren scheint.