NPM：字段 'browser' 不包含有效的别名配置

Question

正在执行：

node .\node_modules\webpack\bin\webpack.js --config scripts/webpack.config.js --display-error-details

产生此错误。

我目前正在测试这个，所以application.ts只有这个

export class Aureus {

    constructor() {
        alert('1');
    }

}

webpack 文件如下所示：

const globule = require("globule");
const path = require("path");
const webpack = require("webpack");
const extractTextPlugin = require("extract-text-webpack-plugin");

const config = {
};

const configuration = {
    context: __dirname,
    entry: {
        "application": 
            "application.ts",
            ...globule.find("aureus/**/*.ts", { srcBase: "./scripts" }),
        ,
        "vendor": [
            "bootstrap",
            "jquery",
            "angular",
            "moment",
            "lodash",
            "ramda",
        ],
    },
    output: {
        path: path.join(__dirname, "../"),
        filename: "packed.js"
    },
    devtool: "source-map",
    plugins: [
        new webpack.LoaderOptionsPlugin({
            debug: true
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            filename: "vendor.js"
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            "window.jquery": "jquery",
        }),
    ],
    resolve:
    {
        alias: {
        }
    },
    module: {
        rules: [
            {
                test: /^((?!\.spec\.ts).)*.ts$/,
                use: [
                    {
                        loader: "awesome-typescript-loader"
                    }
                ],
                exclude: /(node_modules)/
            },
        ]
    }
};

module.exports = configuration;

我收到这个错误？ application.ts 在 ./scripts/application.ts （与 webpack.config.js 相同的目录）

ERROR in Entry module not found: Error: Can't resolve 'application.ts' in 'C:\Projects\Github\Aureus\Aureus.Web\scripts'
resolve 'application.ts' in 'C:\Projects\Github\Aureus\Aureus.Web\scripts'
  Parsed request is a module
  using description file: C:\Projects\Github\Aureus\Aureus.Web\package.json (relative path: ./scripts)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\Projects\Github\Aureus\Aureus.Web\package.json (relative path: ./scripts)
    resolve as module
      C:\Projects\Github\Aureus\Aureus.Web\scripts\node_modules doesn't exist or is not a directory
      C:\Projects\Github\Aureus\node_modules doesn't exist or is not a directory
      C:\Projects\Github\node_modules doesn't exist or is not a directory
      C:\Projects\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      looking for modules in C:\Projects\Github\Aureus\Aureus.Web\node_modules
        using description file: C:\Projects\Github\Aureus\Aureus.Web\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: C:\Projects\Github\Aureus\Aureus.Web\package.json (relative path: ./node_modules)
          using description file: C:\Projects\Github\Aureus\Aureus.Web\package.json (relative path: ./node_modules/application.ts)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Projects\Github\Aureus\Aureus.Web\node_modules\application.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Projects\Github\Aureus\Aureus.Web\node_modules\application.ts.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              C:\Projects\Github\Aureus\Aureus.Web\node_modules\application.ts.json doesn't exist
            as directory
              C:\Projects\Github\Aureus\Aureus.Web\node_modules\application.ts doesn't exist

Answer 1

除非您提供实际的 resolve 规则，否则您在 node_modules 中导入任何内容都将默认在提供给 context 的文件夹中查找。

不如试试这个：

resolve: {    
  modules: [
    /* assuming that one up is where your node_modules sit,
       relative to the currently executing script
    */
    path.join(__dirname, '../node_modules')
  ]
}

此外，请确保您引用的 entry 是相对于 context 的，如下所示：

"application": "./application.ts"

而不是

"application": "application.ts"

Answer 2

也许您需要检查您的软件包-lock.json，并假定您的软件包版本是正确的

当你的包版本不正确时，NPM 会给出这个错误。

这里有三个提示：

检查节点版本：node -v
确保进入根目录时已经安装：nom i
检查 package.json 个文件中的版本。你可能会发现一些问题。

像这样：

"eslint": "^5.16.0",

而不是：

"eslint": "^4.4.0",

NPM：字段 'browser' 不包含有效的别名配置

NPM: Field 'browser' doesn't contain a valid alias configuration

javascript

npm

webpack

webpack-2