node.js - 在构建过程中找不到字形或别名的问题

Question

我看到一个错误，该错误与未找到的来自 Bootstrap 的一堆 .eot 字形有关。我收到两个我认为相关的错误。一堆无法解析或字形不存在的错误，以及有关字段 browser 不包含有效别名配置的错误。

我已经包含了完整的错误消息以及 babelrc 文件和 webpack 配置。如果相关，我还将在下面包含更长的 package.json。

错误说它正在寻找像这样的路径:

/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot

但是实际路径应该是:

/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot

错误:

ERROR in ./node_modules/bootstrap-loader/no-op.js (./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":3,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style-loader","css-loader","sass-loader"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader/.bootstraprc-3-default","bootstrapPath":"/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass","bootstrapRelPath":"../bootstrap-sass"}!./node_modules/bootstrap-loader/no-op.js)
Module not found: Error: Can't resolve '../bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot' in '/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader'
resolve '../bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot' in '/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader'
  using description file: /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/package.json (relative path: ./assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot.jsx doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot.json doesn't exist
      .scss
        Field 'browser' doesn't contain a valid alias configuration
        /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot.scss doesn't exist
      as directory

.babelrc:

{
  "presets": [
      "@babel/preset-env",
      "@babel/preset-react",
      "@babel/preset-flow"
  ],
  "plugins": [
    "react-hot-loader/babel",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
      [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-json-strings",
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    "@babel/plugin-proposal-optional-chaining",
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ],
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-do-expressions",
    "@babel/plugin-proposal-function-bind",
    "@babel/plugin-transform-object-assign"
  ]
}

common.config.js(又名 webpack 配置):

const path = require('path');
const autoprefixer = require('autoprefixer');
const merge = require('webpack-merge');

const development = require('./dev.config');
const devprod = require('./dev.configPROD');
const production = require('./prod.config');

// require('babel-polyfill').default;

const TARGET = process.env.npm_lifecycle_event;

const PATHS = {
    app: path.join(__dirname, '../src'),
    build: path.join(__dirname, '../dist'),
};




process.env.BABEL_ENV = TARGET;

const common = {
    entry: [
        PATHS.app,
    ],

    output: {
        path: PATHS.build,
        filename: 'bundle.js',
    },

    resolve: {
        extensions: ['.jsx', '.js', '.json', '.scss'],
        modules: ['node_modules', PATHS.app],
    },
    module: {
        rules: [{
            test: /bootstrap-sass\/assets\/javascripts\//,
            use: [
                { loader: 'imports-loader?jQuery=jquery' },
            ]
        }, {
            test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
            use: [
                { loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
            ]
        }, {
            test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
            use: [
                { loader: 'url-loader?limit=10000&mimetype=application/font-woff2' },
            ]
        }, {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            use: [
                { loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
            ]
        }, {
            test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
            use: [
                { loader: 'url-loader?limit=10000&mimetype=application/font-otf' },
            ]
        }, {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            use: [
                { loader: 'url-loader?limit=100000' },
            ]
        },  {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            use: [
                { loader: 'file-loader' },
            ]
        }, {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            use: [
                { loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
            ]
        }, {
            test: /\.m?js$/,
            use: [{
                loader: 'babel-loader',
                options:
                    {
                        presets: [],
                    },
            }],
            exclude: /node_modules/,
        }, {
            test: /\.png$/,
            use: [
                { loader: 'file-loader?name=[name].[ext]' },
            ]
        }, {
            test: /\.jpg$/,
            use: [
                { loader: 'file-loader?name=[name].[ext]' },
            ]
        }, {
            test: /\.css$/,
            use: [
                { loader: 'style-loader' },
                { loader: 'css-loader' },
            ]
        }],
    },
};

if (TARGET === 'start' || !TARGET) {
    module.exports = merge(development, common);
}

if (TARGET === 'build' || !TARGET) {
    module.exports = merge(devprod, common);
    //module.exports = merge(production, common);
    //Results in graphical glitchs (css) because of uglify-js
    //development config does not run uglify-js and therefore produces usable bundle
}

它还会为 webpack 加载另一个配置文件，我也将在此处包含该配置文件:

dev.configPROD.js:

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    entry: [
        'bootstrap-loader',
        './src/index',
    ],
    output: {
        publicPath: '/dist/',
    },

    module: {
        rules: [{
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [autoprefixer()],
                        },
                    },
                    'sass-loader',
                ],
            }),
        }],
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"developmentPROD"',
            },
            __DEVELOPMENT__: true,
        }),
        new ExtractTextPlugin('bundle.css'),
        new webpack.optimize.OccurrenceOrderPlugin(),
        // new webpack.HotModuleReplacementPlugin(),     //no pings back to webpack "_hrm"
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Tether: 'tether',
            'window.Tether': 'tether',
            Popper: ['popper.js', 'default'],
            Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
            Button: 'exports-loader?Button!bootstrap/js/dist/button',
            Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
            Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
            Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
            Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
            Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
            Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
            Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
            Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
            Util: 'exports-loader?Util!bootstrap/js/dist/util',
        }),
    ],
};

最后是 package.json:

{
  "name": "redux-easy-boilerplate",
  "version": "1.3.3",
  "description": "",
  "scripts": {
    "clean": "rimraf dist",
    "build": "webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js",
    "build:production": "npm run clean && npm run build",
    "lint": "eslint src",
    "start": "node bin/server.js",
    "test": "karma start"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
    "react",
    "reactjs",
    "boilerplate",
    "redux",
    "hot",
    "reload",
    "hmr",
    "live",
    "edit",
    "webpack"
  ],
  "author": "https://github.com/anorudes, https://github.com/keske",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-do-expressions": "^7.0.0",
    "@babel/plugin-proposal-export-default-from": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-bind": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/polyfill": "7.4.4",
    "autoprefixer": "9.6.0",
    "axios": "0.19.0",
    "babel-eslint": "10.0.2",
    "babel-loader": "8.0.6",
    "babel-plugin-react-transform": "^3.0.0",
    "bootstrap": "4.3.1",
    "bootstrap-loader": "^3.0.4",
    "bootstrap-sass": "3.4.1",
    "bootstrap-webpack": "0.0.6",
    "classnames": "2.2.6",
    "css-loader": "3.0.0",
    "csswring": "^7.0.0",
    "deep-equal": "^1.0.1",
    "eslint": "^6.0.1",
    "eslint-config-airbnb": "17.1.0",
    "eslint-plugin-import": "2.18.0",
    "eslint-plugin-jsx-a11y": "6.2.1",
    "eslint-plugin-react": "7.14.2",
    "expect": "24.8.0",
    "exports-loader": "^0.7.0",
    "expose-loader": "^0.7.5",
    "express": "4.17.1",
    "express-open-in-editor": "^3.1.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^4.0.0",
    "gapi": "0.0.3",
    "history": "4.9.0",
    "http-proxy": "^1.17.0",
    "imports-loader": "^0.8.0",
    "jasmine-core": "3.4.0",
    "jquery": "3.4.1",
    "jwt-decode": "^2.2.0",
    "karma": "4.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-mocha": "^1.3.0",
    "karma-webpack": "4.0.2",
    "less": "3.9.0",
    "less-loader": "^5.0.0",
    "lodash": "4.17.11",
    "material-ui": "^1.0.0-beta.47",
    "material-ui-icons": "^1.0.0-beta.36",
    "mocha": "^6.1.4",
    "morgan": "1.9.1",
    "node-sass": "4.12.0",
    "npm-install-webpack-plugin": "^4.0.5",
    "postcss-import": "^12.0.1",
    "postcss-loader": "3.0.0",
    "q": "^1.5.1",
    "qs": "6.7.0",
    "rc-datepicker": "5.0.14",
    "react": "16.8.6",
    "react-addons-css-transition-group": "^15.6.2",
    "react-calendar-component": "^3.0.0",
    "react-date-picker": "7.5.1",
    "react-datepicker": "2.7.0",
    "react-document-meta": "^3.0.0-beta.5",
    "react-dom": "16.8.6",
    "react-forms": "^2.0.0-beta33",
    "react-hot-loader": "4.11.1",
    "react-loading-order-with-animation": "^1.0.0",
    "react-onclickoutside": "6.8.0",
    "react-redux": "7.1.0",
    "react-router": "5.0.1",
    "react-router-redux": "^4.0.8",
    "react-select": "^3.0.4",
    "react-tap-event-plugin": "3.0.3",
    "react-transform-hmr": "^1.0.4",
    "redux": "4.0.1",
    "redux-form": "8.2.4",
    "redux-logger": "3.0.6",
    "redux-thunk": "^2.3.0",
    "resolve-url-loader": "3.1.0",
    "rimraf": "2.6.3",
    "sass-loader": "7.1.0",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "2.1.3",
    "url-loader": "2.0.1",
    "webpack": "4.35.0",
    "webpack-cli": "3.3.5",
    "webpack-dev-middleware": "3.7.0",
    "webpack-dev-server": "3.7.2",
    "webpack-hot-middleware": "2.25.0",
    "webpack-merge": "4.2.1",
    "yargs": "^13.2.4"
  },
  "dependencies": {
    "@babel/cli": "7.4.4",
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-object-assign": "7.2.0",
    "@babel/preset-env": "7.4.5",
    "@babel/preset-flow": "7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@material-ui/core": "4.1.3",
    "@material-ui/icons": "4.2.1",
    "material-ui-pickers": "2.2.4",
    "moment": "2.24.0",
    "npm-check-updates": "3.1.12",
    "papaparse": "5.0.0",
    "prop-types": "15.7.2",
    "query-string": "6.8.1",
    "react-csv": "1.1.1",
    "react-dates": "20.2.4",
    "react-document-title": "^2.0.3",
    "react-handsontable": "0.3.2",
    "react-scripts": "3.0.1",
    "react-select-fast-filter-options": "^0.2.3",
    "react-virtualized-select": "^3.1.3",
    "reactstrap": "8.0.0"
  }
}

Answer 1

这个问题可以通过简单地更改变量来解决，这些变量指示 stylsheets 文件夹之外的字体文件夹的路径。

导入时必须使用2个变量

// Bootstrap
$bootstrap-sass-asset-helper: false !default;
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../../fonts/bootstrap/") !default;

@import 'bootstrap-sass';