Question

使用Aurelia latest和webpack，运行npm run watch，我在浏览器中收到以下错误，并且该应用无法加载：

未捕获（在承诺中）未定义PLATFORM.Loader且存在无论是全局可用的系统API（ES6）还是要求API（AMD）加载你的应用

我认为PLATFORM（来自aurelia-pal）由于某种原因在运行时不可用。以下是我希望足以理解错误的信息。

这是我的webpack.config.js：

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { AureliaPlugin, ModuleDependenciesPlugin } = require("aurelia-webpack-plugin");
const optimize = webpack.optimize;

module.exports = {
    entry: {
        main: "./src/main.ts",
        vendor: [ "aurelia-bootstrapper" ]
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js"
    },
    resolve: {
        extensions: [".ts", ".js"],
        modules: ["src", "node_modules"].map(x => path.resolve(x))
    },
    devServer: {
        contentBase: path.resolve(__dirname, "dist"),
        // serve index.html for all 404 (required for push-state)
        historyApiFallback: true
    },
    mode: "development",
    devtool: "inline-source-map",
    optimization: {
        minimize: false
    },
    module: {
        rules: [
            {
                enforce: "pre",
                test: /.ts$/,
                use: "source-map-loader"
            },
            {
                test: /\.css$/i,
                use: [{
                    loader: "css-loader",
                    options: {
                        sourceMap: true
                    }
                }]
            },
            {
                test: /\.less$/i,
                use: [{
                    loader: "css-loader",
                    options: {
                        sourceMap: true
                    }
                },
                {
                    loader: "less-loader",
                    options: {
                        sourceMap: true
                    }
                }]
            },
            {
                test: /\.ts$/i,
                use: "ts-loader"
            },
            {
                test: /\.html$/i,
                use: "html-loader"
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        mimetype: 'application/font-woff',
                        name: 'fonts/[name].[ext]'
                    }
                }]
            },
            {
                test: /\.(eot|svg|ttf)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: [{
                    loader: 'file-loader'
                }]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        }),
        new AureliaPlugin()
    ]
};

我的package.json：

{
    "name": "ts-webpack-starter",
    "version": "1.0.0",
    "main": "index.js",
    "author": "Benny Halperin",
    "license": "MIT",
    "scripts": {
        "lint": "tslint src/**/*.ts",
        "watch": "yarn webpack-dev-server --config webpack.dev.js --hot --inline --progress",
        "_watch": "webpack-dashboard webpack-dev-server --config webpack.dev.js --hot --inline --progress",
        "build:prod": ""
    },
    "devDependencies": {
        "@types/jasmine": "^2.8.6",
        "aurelia-testing": "^1.0.0-beta.4.0.0",
        "aurelia-webpack-plugin": "^3.0.0-rc.1",
        "awesome-typescript-loader": "^5.0.0",
        "css-loader": "^0.28.11",
        "file-loader": "^1.1.11",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "jasmine": "^3.1.0",
        "jasmine-core": "^3.1.0",
        "jasmine-ts": "^0.2.1",
        "karma": "^2.0.0",
        "karma-chrome-launcher": "^2.2.0",
        "karma-headless-chrome-launcher": "^0.0.6",
        "karma-jasmine": "^1.1.1",
        "karma-phantomjs-launcher": "^1.0.4",
        "karma-typescript": "^3.0.12",
        "karma-webpack": "^3.0.0",
        "less": "^3.0.1",
        "less-loader": "^4.1.0",
        "source-map-loader": "^0.2.3",
        "style-loader": "^0.20.3",
        "ts-loader": "^4.2.0",
        "tslib": "^1.9.0",
        "tslint": "^5.9.1",
        "typescript": "^2.8.1",
        "url-loader": "^1.0.1",
        "webpack": "^4.5.0",
        "webpack-cli": "^2.0.14",
        "webpack-dashboard": "^1.1.1",
        "webpack-dev-server": "^3.1.2",
        "webpack-merge": "^4.1.2"
    },
    "dependencies": {
        "aurelia-bootstrap": "^0.1.20",
        "aurelia-bootstrapper": "^2.2.0",
        "aurelia-fetch-client": "^1.3.1",
        "aurelia-framework": "^1.2.0",
        "aurelia-google-maps": "^2.2.1",
        "bootstrap": "^4.0.0",
        "firebase": "^4.12.1",
        "font-awesome": "^4.7.0"
    }
}

Answer 1

您可以尝试明确安装aurelia-loader作为依赖项。通常不应该需要。我个人喜欢明确安装我的所有aurelia依赖项。当然有20个，但无论如何你经常看看package.json ..

我注意到的其他一些潜在问题：

非常确定您不应该在您的webpack配置中引用main.ts。这是典型的条目配置：

entry: {
  app: ["aurelia-bootstrapper"],
  vendor: ["bluebird"]
},

aurelia-bootstrapper将根据index.html中的aurelia-app属性找到您的main.ts。 aurelia-webpack-plugin将确保包含它。供应商可能会或可能不会被完全省略（实际上不确定webpack插件是否显式查找），但app应为aurelia-bootstrapper afaik。

我也看到你没有安装蓝鸟。也许firebase已经包含了promises，但是你可能想要保留bluebird（如果大小是关注的话，可以选择.core变体）。那里没有better performing承诺库（Aurelia在项目模板中有它的一个很好的理由）

未捕获（在承诺中）未定义PLATFORM.Loader，并且全局无法使用System API（ES6）或Require API（AMD）来加载您的应用

1 个答案: