javascript - webpack 无法解析 bootstrap-loader 的 bootstrap 模块

Question

尝试为 webpack 实现 bootstrap-loader，但我一直遇到同样的问题。尝试向 github 存储库开发人员提出它，但他们没有说它有效吗？他们还建议降级到 bootstrap alpha 2，但这并没有解决问题。

repo for reference

错误

ERROR in ./~/bootstrap-loader/lib/bootstrap.loader.js?configFilePath=/home/p3pt/dev/java/projects/sba2-wip/frontend/config/.bootstraprc!./~/bootstrap-loader/no-op.js
Module build failed: Error: 
Could not find bootstrap version: '4'. Did you install it?
The package is 'bootstrap' for bootstrap v4 and 'bootstrap-sass' for v3.

    at Object.module.exports.pitch (/home/p3pt/dev/java/projects/sba2-wip/frontend/node_modules/bootstrap-loader/lib/bootstrap.loader.js:114:11)

调试日志

[bootstrap-loader]:  bootstrap-loader is using config file at /home/p3pt/dev/java/projects/sba2-wip/frontend/config/.bootstraprc 

[bootstrap-loader]:  Hey, we're in DEBUG mode because you have 
      your config log level set to 'debug'. 

[bootstrap-loader]:  Query from webpack config: ?configFilePath=/home/p3pt/dev/java/projects/sba2-wip/frontend/config/.bootstraprc 

[bootstrap-loader]:  Using Bootstrap module: bootstrap 

[bootstrap-loader]:  resolveModule error is  [Error: Cannot find module 'bootstrap' from '/home/p3pt/dev/java/projects/sba2-wip/frontend/node_modules/bootstrap-loader/lib/utils'] 

[bootstrap-loader]:  Bootstrap module location (abs): false 

webpack 配置

const webpackMerge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const commonConfig = require('./webpack.common.js');
const helpers = require('./helpers');

const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const HMR = helpers.hasProcessFlag('hot');
const METADATA = webpackMerge(commonConfig.metadata, {
    host: 'localhost',
    port: 3000,
    ENV: ENV,
    HMR: HMR
});

const bootstrapDevEntryPoint = 'bootstrap-loader/lib/bootstrap.loader?' +
          `configFilePath=${__dirname}/.bootstraprc` +
          '!bootstrap-loader/no-op.js';

module.exports = webpackMerge(commonConfig, {
    metadata: METADATA,
    debug: true,
    devtool: 'cheap-module-eval-source-map',

    entry: {
        bootstrapDevEntryPoint
    },

    output: {
        path: helpers.root('dist'),
        filename: '[name].js',
        chunkFilename: '[id].chunk.js',
        sourceMapFilename: '[name].map',
        library: 'ac_[name]',
        libraryTarget: 'var',
    },

    plugins: [
        new DefinePlugin({
            'ENV': JSON.stringify(METADATA.ENV),
            'HMR': METADATA.HMR,
            'process.env': {
                'ENV': JSON.stringify(METADATA.ENV),
                'NODE_ENV': JSON.stringify(METADATA.ENV),
                'HMR': METADATA.HMR
            }
        }),
    ],

    devServer: {
        port: METADATA.port,
        host: METADATA.host,
        historyApiFallback: true,
        watchOptions: {
            aggregateTimeout: 300,
            poll: 1000
        },
        outputPath: helpers.root('dist')
    },

    node: {
        global: 'window',
        crypto: 'empty',
        process: true,
        module: false,
        clearImmediate: false,
        setImmediate: false
    }
});

package.json

...
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/platform-server": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "bootstrap": "^4.0.0-alpha.2",
    "core-js": "^2.4.1",
    "font-awesome": "^4.6.3",
    "jquery": "^3.1.0",
    "lodash": "^4.15.0",
    "moment": "^2.14.1",
    "ng2-bootstrap": "^1.0.24",
    "rxjs": "5.0.0-beta.11",
    "tether": "^1.3.4",
    "zone.js": "^0.6.17"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.33",
    "@types/lodash": "4.14.34",
    "@types/node": "^6.0.38",
    "@types/source-map": "^0.1.26",
    "@types/webpack": "^1.12.33",
    "angular2-hmr": "~0.8.1",
    "angular2-template-loader": "^0.5.0",
    "autoprefixer": "^6.4.0",
    "awesome-typescript-loader": "2.2.1",
    "bootstrap-loader": "^2.0.0-beta.3",
    "codelyzer": "0.0.28",
    "css-loader": "^0.24.0",
    "extract-text-webpack-plugin": "^2.0.0-beta.3",
    "file-loader": "^0.9.0",
    "font-awesome-sass-loader": "^1.0.2",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.22.0",
    "http-server": "^0.9.0",
    "imports-loader": "^0.6.5",
    "istanbul-instrumenter-loader": "^0.2.0",
    "jasmine-core": "^2.4.1",
    "json-loader": "^0.5.4",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.1.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "node-sass": "^3.8.0",
    "postcss-loader": "^0.10.1",
    "raw-loader": "^0.5.1",
    "remap-istanbul": "^0.6.4",
    "resolve": "^1.1.7",
    "resolve-url-loader": "^1.6.0",
    "rimraf": "^2.5.4",
    "sass-loader": "^4.0.0",
    "source-map-loader": "^0.1.5",
    "style-loader": "^0.13.1",
    "to-string-loader": "^1.1.4",
    "ts-helpers": "1.1.1",
    "ts-node": "^1.3.0",
    "tslint": "^3.15.1",
    "tslint-loader": "^2.1.5",
    "typescript": "^2.0.0-beta",
    "url-loader": "^0.5.7",
    "webpack": "^2.1.0-beta.21",
    "webpack-dev-server": "^2.1.0-beta.0",
    "webpack-merge": "^0.14.1"
  }
...

Answer 1

问题在于 bootstrap alpha 3 已损坏，降级到 alpha 2 的建议实际上有效。我误解了 npm install 会选择 ^ 符号并升级包。

修复涉及更改 package.json 中的以下内容

改变

“bootstrap”:“^4.0.0-alpha.2”

至

“bootstrap”:“4.0.0-alpha.2”