2

我正在使用 react-slingshot 来构建我的 React 应用程序，并且我正在尝试将 Bootstrap v4 集成到其中并且没有让 JavaScript 正常工作。

到目前为止，我有一个 package.json 文件，如下所示：

{
  "name": "react-slingshot",
  "version": "5.0.0",
  "description": "Starter kit for creating apps with React and Redux",
  "engines": {
    "npm": ">=3"
  },
  "scripts": {
    "preinstall": "node tools/nodeVersionCheck.js",
    "setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js",
    "remove-demo": "babel-node tools/removeDemo.js",
    "start-message": "babel-node tools/startMessage.js",
    "prestart": "npm-run-all --parallel start-message remove-dist",
    "start": "npm-run-all --parallel test:watch open:src lint:watch",
    "open:src": "babel-node tools/srcServer.js",
    "open:dist": "babel-node tools/distServer.js",
    "lint": "esw webpack.config.* src tools --color",
    "lint:watch": "npm run lint -- --watch",
    "clean-dist": "npm run remove-dist && mkdir dist",
    "remove-dist": "rimraf ./dist",
    "prebuild": "npm run clean-dist && npm run lint && npm run test",
    "build": "babel-node tools/build.js && npm run open:dist",
    "test": "mocha tools/testSetup.js \"src/**/*.spec.js\" --reporter progress",
    "test:cover": "babel-node node_modules/isparta/bin/isparta cover --root src --report html node_modules/mocha/bin/_mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" --reporter progress",
    "test:cover:travis": "babel-node node_modules/isparta/bin/isparta cover --root src --report lcovonly _mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
    "test:watch": "npm run test -- --watch",
    "open:cover": "npm run test:cover && open coverage/index.html"
  },
  "author": "Cory House",
  "license": "MIT",
  "dependencies": {
    "bootstrap": "4.0.0-alpha.4",
    "bootstrap-loader": "2.0.0-beta.12",
    "imports-loader": "0.6.5",
    "jquery": "3.1.1",
    "moment": "2.15.1",
    "object-assign": "4.1.0",
    "react": "15.3.1",
    "react-addons-transition-group": "15.3.2",
    "react-dom": "15.3.1",
    "react-redux": "4.4.5",
    "react-router": "2.7.0",
    "react-router-redux": "4.0.5",
    "reactstrap": "3.3.2",
    "redux": "3.5.2",
    "redux-thunk": "2.1.0",
    "tether": "1.3.7"
  },
  "devDependencies": {
    "autoprefixer": "6.4.0",
    "babel-cli": "6.14.0",
    "babel-core": "6.14.0",
    "babel-loader": "6.2.5",
    "babel-plugin-react-display-name": "2.0.0",
    "babel-plugin-transform-react-constant-elements": "6.9.1",
    "babel-plugin-transform-react-remove-prop-types": "0.2.9",
    "babel-preset-latest": "6.14.0",
    "babel-preset-react": "6.11.1",
    "babel-preset-react-hmre": "1.1.1",
    "babel-preset-stage-1": "6.13.0",
    "babel-register": "6.14.0",
    "bootstrap": "4.0.0-alpha.4",
    "browser-sync": "2.14.0",
    "chai": "3.5.0",
    "chalk": "1.1.3",
    "connect-history-api-fallback": "1.3.0",
    "coveralls": "2.11.12",
    "cross-env": "2.0.1",
    "css-loader": "0.24.0",
    "enzyme": "2.4.1",
    "eslint": "3.4.0",
    "eslint-plugin-import": "1.14.0",
    "eslint-plugin-jsx-a11y": "2.2.0",
    "eslint-plugin-react": "6.2.0",
    "eslint-watch": "2.1.14",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.9.0",
    "html-webpack-plugin": "2.22.0",
    "isparta": "4.0.0",
    "mocha": "3.0.2",
    "mockdate": "1.0.4",
    "node-sass": "3.8.0",
    "npm-run-all": "3.0.0",
    "open": "0.0.5",
    "postcss-loader": "0.11.0",
    "prompt": "1.0.0",
    "react-addons-test-utils": "15.3.1",
    "redux-immutable-state-invariant": "1.2.3",
    "replace": "0.3.0",
    "resolve-url-loader": "1.6.0",
    "rimraf": "2.5.4",
    "sass-loader": "4.0.0",
    "sinon": "1.17.5",
    "sinon-chai": "2.8.0",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "webpack": "1.13.2",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.12.2",
    "webpack-md5-hash": "0.0.5"
  },
  "keywords": [
    "react",
    "reactjs",
    "react-router",
    "hot",
    "reload",
    "hmr",
    "live",
    "edit",
    "webpack",
    "redux",
    "flux",
    "boilerplate",
    "starter"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/coryhouse/react-slingshot"
  }
}

我有一个看起来像这样的 webpack 文件：

import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';
import path from 'path';

export default {
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  debug: true,
  devtool: 'eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
  noInfo: true, // set to false to see a list of every file being bundled.
  entry: [
    'bootstrap-loader',
    './src/webpack-public-path',
    'webpack-hot-middleware/client?reload=true',
    path.resolve(__dirname, 'src/index.js') // Defining path seems necessary for this to work consistently on Windows machines.
  ],
  target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
  output: {
    path: path.resolve(__dirname, 'dist'), // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery",
    Tether: "tether",
    "window.Tether": "tether",
    Tooltip: "exports?Tooltip!bootstrap/js/dist/tooltip",
    Alert: "exports?Alert!bootstrap/js/dist/alert",
    Button: "exports?Button!bootstrap/js/dist/button",
    Carousel: "exports?Carousel!bootstrap/js/dist/carousel",
    Collapse: "exports?Collapse!bootstrap/js/dist/collapse",
    Dropdown: "exports?Dropdown!bootstrap/js/dist/dropdown",
    Modal: "exports?Modal!bootstrap/js/dist/modal",
    Popover: "exports?Popover!bootstrap/js/dist/popover",
    Scrollspy: "exports?Scrollspy!bootstrap/js/dist/scrollspy",
    Tab: "exports?Tab!bootstrap/js/dist/tab",
    Util: "exports?Util!bootstrap/js/dist/util",
  }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
      __DEV__: true
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({     // Create HTML file that includes references to bundled CSS and JS.
      template: 'src/index.ejs',
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      inject: true
    })
  ],
  module: {
    loaders: [
      { test: /bootstrap.+\.(jsx|js)$/, loader: 'imports?jQuery=jquery,$=jquery,this=>window' },
      {test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel']},
      {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
      {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
      {test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'},
      {test: /\.ico$/, loader: 'file?name=[name].[ext]'},
      {test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']},
    ]
  },
  postcss: ()=> [autoprefixer]
};

我收到以下错误：

./~/bootstrap-loader/lib/bootstrap.loader.js! 中的错误！/~/bootstrap-loader/no-op.js 模块构建失败：错误：找不到引导程序版本：'3'。你安装了吗？该软件包是 bootstrap v4 的“bootstrap”和 v3 的“bootstrap-sass”。

在 Object.module.exports.pitch (/Users/ryannealmes/sites/work/andromeda/node_modules/bootstrap-loader/lib/bootstrap.loader.js:143:11) @ ./~/bootstrap-loader/loader.js 6:17-61 “index.html”的子 html-webpack-plugin：

我用谷歌搜索并找到了很多关于这个的答案，但没有一个有效。谁能指出我应该让 Bootstrap v4 JavaScript 为 react-slingshot 工作的方向？

4

1 回答 1

1

您是否尝试使用引导程序 v3 或 v4？如果您想使用 v4，您需要.bootstraprc在项目根目录中另外安装一个"bootstrapVersion": 3.

此外，我将bootstrap-loader在您的条目下方向下移动，./src/webpack-public-path因为此文件修复了图标字体的相对路径问题。这主要是 bootstrap 3 的问题，但如果不是列表中的第一个，可能会产生不良影响。

资源

于 2016-12-23T15:54:47.723 回答