Question

这可能是另一个初学者问题

我使用 JavaScript Services aurelia SPA模板设置了一个项目。在IE11中运行此项目会抛出未处理的运行时异常：“Promise”未定义。

第1923行第3行未处理的异常 http://localhost:54195/dist/app.js?v=eXMK1e2R-1iC7sDJ1TzKClbGOJAKb11N-KPl95g30Fg 0x800a1391 - JavaScript中的Laufzeitfehler：“承诺”是不确定的发生

要解决此问题，我尝试按照几篇帖子中的建议添加Bluebird库。但我无法让它运行。我总是得到同样的错误。显然，错误发生在 aurelia-bootstrapp-webpack.js 第36行（ function ready（））中。显然，Bluebird库仍然无法识别。以下是我到目前为止的情况：

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

经过一番研究，我找到了解决方案。那就是将bluebird添加到 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: '/'
    })
]

ProvidePlugin似乎将Bluebird注入每个包中。

将Bluebird添加到aurelia项目不起作用

1 个答案: