Webpack的bootrstrap-sass错误：Bootstrap的JavaScript需要jQuery

时间：2017-03-20 17:40:44

标签： javascript jquery twitter-bootstrap webpack bootstrap-sass

这是我第一次使用bootstrap-sass和webpack 2.0。我基于react-redux-universal-hot-example的使用而进行了微小的更改。

我配置了以下软件包：

  "dependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-react-display-name": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-0": "^6.22.0",
    "babel-register": "^6.23.0",
    "babel-runtime": "^6.23.0",
    "body-parser": "^1.16.1",
    "compression": "^1.6.2",
    "containers": "0.0.1",
    "express": "^4.14.1",
    "express-session": "^1.15.1",
    "file-loader": "^0.10.1",
    "http-proxy": "^1.16.2",
    "immutable": "^3.8.1",
    "less": "^2.7.2",
    "less-loader": "^3.0.0",
    "multireducer": "^3.1.0",
    "piping": "^1.0.0-rc.4",
    "pretty-error": "^2.0.3",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-helmet": "^4.0.0",
    "react-redux": "^5.0.2",
    "react-router": "^3.0.2",
    "react-router-redux": "^4.0.8",
    "react-transform-catch-errors": "^1.0.2",
    "redbox-react": "^1.3.4",
    "redux": "^3.6.0",
    "redux-async-connect": "^1.0.0-rc4",
    "redux-form": "^6.5.0",
    "redux-thunk": "^2.2.0",
    "serialize-javascript": "^1.3.0",
    "serve-favicon": "^2.4.1",
    "socket.io": "^1.7.3",
    "socket.io-client": "^1.7.3",
    "superagent": "^3.5.0",
    "url-loader": "^0.5.8",
    "violet-paginator": "^3.0.0-beta-3",
    "webpack-isomorphic-tools": "^2.6.6"
  },
  "devDependencies": {
    "babel-cli": "^6.24.0",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-typecheck": "^3.9.0",
    "babel-preset-env": "^1.2.1",
    "better-npm-run": "0.0.14",
    "bootstrap-sass": "^3.3.7",
    "bootstrap-sass-loader": "^1.0.10",
    "clean-webpack-plugin": "^0.1.15",
    "concurrently": "^3.3.0",
    "eslint": "^3.17.1",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-loader": "^1.6.3",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.10.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "font-awesome": "^4.7.0",
    "font-awesome-webpack": "0.0.4",
    "react-a11y": "^0.3.3",
    "sass-loader": "^6.0.3",
    "strip-loader": "^0.1.2",
    "style-loader": "^0.14.0",
    "webpack": "^2.2.1",
    "webpack-dev-middleware": "^1.10.1",
    "webpack-hot-middleware": "^2.17.0"
  }

我的boostrap.config.js：

/**
 * Bootstrap configuration for bootstrap-sass-loader
 *
 * Scripts are disabled to not load jQuery.
 * If you depend on Bootstrap scripts consider react-bootstrap instead.
 * https://github.com/react-bootstrap/react-bootstrap
 *
 * In order to keep the bundle size low in production
 * disable components you don't use.
 *
 */

module.exports = {
  preBootstrapCustomizations: './src/theme/variables.scss',
  mainSass: './src/theme/bootstrap.overrides.scss',
  verbose: false,
  debug: false,
  scripts: {
    transition: false,
    alert: false,
    button: false,
    carousel: false,
    collapse: false,
    dropdown: false,
    modal: false,
    tooltip: false,
    popover: false,
    scrollspy: false,
    tab: false,
    affix: false
  },
  styles: {
    mixins: true,
    normalize: true,
    print: true,
    glyphicons: true,
    scaffolding: true,
    type: true,
    code: true,
    grid: true,
    tables: true,
    forms: true,
    buttons: true,
    'component-animations': true,
    dropdowns: true,
    'button-groups': true,
    'input-groups': true,
    navs: true,
    navbar: true,
    breadcrumbs: true,
    pagination: true,
    pager: true,
    labels: true,
    badges: true,
    jumbotron: true,
    thumbnails: true,
    alerts: true,
    'progress-bars': true,
    media: true,
    'list-group': true,
    panels: true,
    wells: true,
    'responsive-embed': true,
    close: true,
    modals: true,
    tooltip: true,
    popovers: true,
    carousel: true,
    utilities: true,
    'responsive-utilities': true
  }
};

将webpack发布为：

webpack --colors --display-error-details --progress --config webpack/prod.config.js

prod.config.js内容为：

要求（ '巴贝尔-填充工具'）; 

// Webpack config for creating the production bundle.
var path = require('path');
var webpack = require('webpack');
var CleanPlugin = require('clean-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var strip = require('strip-loader');

var projectRootPath = path.resolve(__dirname, '../');
var assetsPath = path.resolve(projectRootPath, './static/dist');

// https://github.com/halt-hammerzeit/webpack-isomorphic-tools
var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));

module.exports = {
  devtool: 'source-map',
  context: path.resolve(__dirname, '..'),
  entry: {
    'main': [
      'bootstrap-sass!./src/theme/bootstrap.config.prod.js',
      'font-awesome-webpack!./src/theme/font-awesome.config.prod.js',
      './src/client.js'
    ]
  },
  output: {
    path: assetsPath,
    filename: '[name]-[chunkhash].js',
    chunkFilename: '[name]-[chunkhash].js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loaders: [strip.loader('debug'), 'babel-loader']},
      { test: /\.json$/, loader: 'json-loader' },
      { test: /\.less$/, loader: ExtractTextPlugin.extract({ fallback: 'style', use: 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap=true&sourceMapContents=true'} ) },
      { test: /\.scss$/, loader: ExtractTextPlugin.extract({ fallback: 'style', use: 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true'} ) },
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
      { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
    ]
  },
  resolve: {
    modules: [
      'src',
      'node_modules'
    ],
    extensions: ['.json', '.js', '.jsx']
  },
  plugins: [
    new CleanPlugin([assetsPath], { root: projectRootPath }),

    // css files from the extract-text-plugin loader
    new ExtractTextPlugin({ filename: '[name]-[chunkhash].css', allChunks: true}),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      },

      __CLIENT__: true,
      __SERVER__: false,
      __DEVELOPMENT__: false,
      __DEVTOOLS__: false
    }),

    // ignore dev config
    new webpack.IgnorePlugin(/\.\/dev/, /\/config$/),

    // optimizations
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),

    webpackIsomorphicToolsPlugin
  ]
};

在运行时我收到以下错误：

   clean-webpack-plugin: D:\DEV\myprj\static\dist has been removed.
Hash: 2387464bdcca3b073b5a                                                      Version: webpack 2.2.1
Time: 6404ms
                       Asset    Size  Chunks                    Chunk Names
main-e3e431cb3191c47eae45.js  384 kB       0  [emitted]  [big]  main
  [10] ./~/react/react.js 56 bytes {0} [built]
  [14] (webpack)/buildin/global.js 509 bytes {0} [built]
 [156] ./~/react-redux/es/index.js 194 bytes {0} [built]
 [258] ./~/bootstrap-sass/assets/javascripts/bootstrap.js!./src/theme/bootstrap.config.prod.js 2.25 kB {0} [built] [failed] [1 error]
 [259] ./~/font-awesome-webpack/index.loader.js!./src/theme/font-awesome.config.prod.js 247 bytes {0} [built]
 [260] ./src/client.js 2.91 kB {0} [built]
 [263] ./~/babel-polyfill/lib/index.js 833 bytes {0} [built]
 [487] ./~/react-dom/index.js 59 bytes {0} [built]
 [560] ./~/react-router-redux/lib/index.js 1.97 kB {0} [built]
 [567] ./~/react-router/es/Router.js 5.3 kB {0} [built]
 [569] ./~/react-router/es/applyRouterMiddleware.js 1.9 kB {0} [built]
 [575] ./~/react-router/es/index.js 1.46 kB {0} [built]
 [597] ./~/redux-async-connect/lib/index.js 797 bytes {0} [built]
 [603] ./~/socket.io-client/lib/index.js 2.17 kB {0} [built]
 [620] multi bootstrap-sass!./src/theme/bootstrap.config.prod.js font-awesome-webpack!./src/theme/font-awesome.config.prod.js ./src/client.js 52 bytes {0} [built]
    + 606 hidden modules

ERROR in ./~/bootstrap-sass/assets/javascripts/bootstrap.js!./src/theme/bootstrap.config.prod.js
Module build failed: Error: Bootstrap's JavaScript requires jQuery
    at Object.<anonymous> (D:\DEV\myprj\node_modules\bootstrap-sass\assets\javascripts\bootstrap.js:8:9)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at loadLoader (D:\DEV\myprj\node_modules\loader-runner\lib\loadLoader.js:13:17)
    at iteratePitchingLoaders (D:\DEV\myprj\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at runLoaders (D:\DEV\myprj\node_modules\loader-runner\lib\LoaderRunner.js:362:2)
    at NormalModule.doBuild (D:\DEV\myprj\node_modules\webpack\lib\NormalModule.js:129:2)
    at NormalModule.build (D:\DEV\myprj\node_modules\webpack\lib\NormalModule.js:180:15)
    at Compilation.buildModule (D:\DEV\myprj\node_modules\webpack\lib\Compilation.js:142:10)
    at factoryCallback (D:\DEV\myprj\node_modules\webpack\lib\Compilation.js:324:11)
    at D:\DEV\myprj\node_modules\webpack\lib\NormalModuleFactory.js:242:4
    at D:\DEV\myprj\node_modules\webpack\lib\NormalModuleFactory.js:93:13
    at D:\DEV\myprj\node_modules\tapable\lib\Tapable.js:204:11
    at NormalModuleFactory.params.normalModuleFactory.plugin (D:\DEV\myprj\node_modules\webpack\lib\CompatibilityPlugin.js:52:5)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (D:\DEV\myprj\node_modules\tapable\lib\Tapable.js:208:13)
    at onDoneResolving (D:\DEV\myprj\node_modules\webpack\lib\NormalModuleFactory.js:68:11)
    at onDoneResolving (D:\DEV\myprj\node_modules\webpack\lib\NormalModuleFactory.js:189:6)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
 @ multi bootstrap-sass!./src/theme/bootstrap.config.prod.js font-awesome-webpack!./src/theme/font-awesome.config.prod.js ./src/client.js

1 个答案:

答案 0 :(得分：3)

显然，您使用了webpack@2.2.1，而在webpack配置文件中不应省略@Entity @Table(name="books") @Component public class Book implements Serializable{ private static final long serialVersionUID = -2042607611480064259L; @Id @GeneratedValue private int id; @NotBlank private String name; @NotBlank @Size(min=2, max=16) private String ispn; @DecimalMin(value = "0.1") private double price; @Transient private Timestamp dateCreated; private Date datePublished; // getter and setters } 后缀。因此，您应该使用-loader而不是bootstrap-sass-loader。 bootstrap-sass和bootstrap-sass在npm共存，所以你必须知道！同时，在bootstrap-sass-loader文件中，有一个代码片段：

bootstrap-sass/assets/javascript/bootstrap.js

这就是为什么即使您在.bootstraprc中配置if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript requires jQuery') } 也会发出此错误的原因！正如作者所建议的，scripts:false已被弃用，因此您应该使用bootstrap-loader。这里有一个demo1 demo2使用bootstrap-loader（不要忘记关注每日/0.0.1，其中CSS将在common.css中提取，而不是在master分支中）。

相关问题
最新问题