将 `react-bootstrap` 与 `npm` 结合使用
Using `react-bootstrap` with `npm`
我想使用 npm 创建一个项目，并想在其中使用 react-bootstrap。我有 package.json 具有以下依赖项。
{
"name": "simple-webapp",
"version": "0.0.1",
"description": "",
"scripts": {
"build": "gulp build",
"watch": "gulp watch --color",
"test": "echo \"This project doesn't have any tests.\" && exit 0"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "3.8.11",
"qwest": "^1.5.12",
"react": "0.13.2",
"syrup": "0.1.14",
"bootstrap": "3.3.5",
"react-bootstrap": "0.13.3",
"react-router": "0.13.3"
}
}
当我 运行 npm install 我得到：
npm WARN package.json simple-webapp@0.0.1 No description
npm WARN package.json simple-webapp@0.0.1 No repository field.
npm WARN package.json simple-webapp@0.0.1 No README data
> fsevents@0.3.6 install /Users/i-danielk/ideaProjects/webapi_bootstrap/webapp/node_modules/syrup/node_modules/watchify/node_modules/chokidar/node_modules/fsevents
> node-gyp rebuild
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
SOLINK_MODULE(target) Release/.node
SOLINK_MODULE(target) Release/.node: Finished
CXX(target) Release/obj.target/fse/fsevents.o
SOLINK_MODULE(target) Release/fse.node
SOLINK_MODULE(target) Release/fse.node: Finished
qwest@1.7.0 node_modules/qwest
react-bootstrap@0.13.3 node_modules/react-bootstrap
react-router@0.13.3 node_modules/react-router
├── object-assign@2.1.1
└── qs@2.4.1
gulp@3.8.11 node_modules/gulp
├── pretty-hrtime@0.2.2
├── interpret@0.3.10
├── deprecated@0.0.1
├── archy@1.0.0
├── minimist@1.1.1
├── tildify@1.1.0 (os-homedir@1.0.0)
├── v8flags@2.0.7 (user-home@1.1.1)
├── semver@4.3.6
├── chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)
├── gulp-util@3.0.5 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reescape@3.0.0, lodash._reevaluate@3.0.0, beeper@1.1.0, lodash._reinterpolate@3.0.0, object-assign@2.1.1, replace-ext@0.0.1, vinyl@0.4.6, chalk@1.0.0, lodash.template@3.6.1, through2@0.6.5, multipipe@0.1.2, dateformat@1.0.11)
├── liftoff@2.1.0 (extend@2.0.1, rechoir@0.6.1, flagged-respawn@0.3.1, resolve@1.1.6, findup-sync@0.2.1)
└── vinyl-fs@0.3.13 (graceful-fs@3.0.8, strip-bom@1.0.0, defaults@1.0.2, vinyl@0.4.6, mkdirp@0.5.1, through2@0.6.5, glob-stream@3.1.18, glob-watcher@0.0.6)
bootstrap@3.3.5 node_modules/bootstrap
react@0.13.2 node_modules/react
└── envify@3.4.0 (through@2.3.7, jstransform@10.1.0)
syrup@0.1.14 node_modules/syrup
├── minimist@1.1.0
├── q@1.0.1
├── run-sequence@1.0.2 (chalk@1.0.0)
├── jshint-stylish@1.0.0 (text-table@0.2.0, string-length@1.0.0, chalk@0.5.1, log-symbols@1.0.2)
├── vinyl-source-stream@1.1.0 (vinyl@0.4.6, through2@0.6.5)
├── gulp-plumber@1.0.0 (through2@0.6.5)
├── gulp-replace@0.5.3 (istextorbinary@1.0.2, replacestream@2.0.0, through2@0.6.3)
├── gulp-sourcemaps@1.5.1 (graceful-fs@3.0.8, convert-source-map@1.1.1, strip-bom@1.0.0, vinyl@0.4.6, through2@0.6.5)
├── vinyl-buffer@1.0.0 (through2@0.6.5, bl@0.9.4)
├── del@0.1.3 (is-path-cwd@1.0.0, each-async@1.1.1, is-path-in-cwd@1.0.0, globby@0.1.1, rimraf@2.4.0)
├── gulp-if@1.2.5 (through2@0.6.5, gulp-match@0.2.1, ternary-stream@1.2.3)
├── express@4.10.1 (merge-descriptors@0.0.2, utils-merge@1.0.0, cookie@0.1.2, fresh@0.2.4, escape-html@1.0.1, range-parser@1.0.2, cookie-signature@1.0.5, finalhandler@0.3.2, vary@1.0.0, media-typer@0.3.0, methods@1.1.0, parseurl@1.3.0, serve-static@1.7.2, content-disposition@0.5.0, path-to-regexp@0.1.3, depd@1.0.1, qs@2.3.2, on-finished@2.1.1, debug@2.1.3, etag@1.5.1, proxy-addr@1.0.8, send@0.10.1, accepts@1.1.4, type-is@1.5.7)
├── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, vinyl@0.4.6, chalk@0.5.1, lodash.template@2.4.1, through2@0.6.5, multipipe@0.1.2, dateformat@1.0.11, lodash@2.4.2)
├── watchify@2.4.0 (through2@0.5.1, chokidar@0.12.6)
├── gulp-uglify@1.1.0 (deepmerge@0.2.10, through2@0.6.5, vinyl-sourcemaps-apply@0.1.4, uglify-js@2.4.16)
├── gulp-cache-breaker@0.0.3 (gulp-replace@0.4.0, checksum@0.1.1, request@2.58.0)
├── stringify@3.1.0 (through@2.3.7, stream-spec@0.3.5, html-minifier@0.6.9)
├── browserify@9.0.3 (https-browserify@0.0.0, tty-browserify@0.0.0, builtins@0.0.7, constants-browserify@0.0.1, process@0.10.1, path-browserify@0.0.0, os-browserify@0.1.2, isarray@0.0.1, inherits@2.0.1, commondir@0.0.1, string_decoder@0.10.31, stream-browserify@1.0.0, defined@0.0.0, has@1.0.0, shell-quote@0.0.1, subarg@1.0.0, domain-browser@1.1.4, xtend@3.0.0, shallow-copy@0.0.1, duplexer2@0.0.2, deep-equal@1.0.0, querystring-es3@0.2.1, assert@1.3.0, punycode@1.2.4, util@0.10.3, through2@1.1.1, events@1.0.2, timers-browserify@1.4.1, concat-stream@1.4.10, parents@1.0.1, console-browserify@1.1.0, vm-browserify@0.0.4, http-browserify@1.7.0, readable-stream@1.1.13, shasum@1.0.1, url@0.10.3, resolve@1.1.6, browser-resolve@1.9.0, labeled-stream-splicer@1.0.2, buffer@3.2.2, glob@4.5.3, JSONStream@0.10.0, deps-sort@1.3.9, syntax-error@1.1.4, browser-pack@4.0.4, crypto-browserify@3.9.14, insert-module-globals@6.5.0, browserify-zlib@0.1.4, module-deps@3.8.1)
├── griddle@0.1.2 (sane@0.8.1, handlebars@2.0.0)
├── gulp-react@3.0.1 (object-assign@2.1.1, through2@0.6.5, vinyl-sourcemaps-apply@0.1.4, react-tools@0.13.3)
├── gulp-jshint@1.9.0 (minimatch@1.0.0, through2@0.6.5, lodash@2.4.2, rcloader@0.1.4, jshint@2.8.0)
├── gulp-autoprefixer@1.0.1 (object-assign@1.0.0, through2@0.6.5, vinyl-sourcemaps-apply@0.1.4, autoprefixer-core@3.1.2)
├── babelify@6.0.1 (through@2.3.4, lodash@3.9.3, babel-core@5.5.8)
└── gulp-less@1.3.6 (convert-source-map@0.4.1, lodash.defaults@2.4.1, through2@0.5.1, vinyl-sourcemaps-apply@0.1.4, less@1.7.5)
安装成功了吗？
在我的 app/main.jsx 里面有一个按钮：
<Button bsStyle="success" bsSize="small" onClick={someCallback}>
Something
</Button>
当我运行npm run build时，我得到：
/Users/i-danielk/ideaProjects/webapi_bootstrap/webapp/app/main.js
line 27 col 33 'Button' is not defined.
line 27 col 88 'someCallback' is not defined.
我哪里做错了？
看起来安装成功了。导致错误的原因是您不需要 react-bootstrap 所以 Button 未定义。另一个错误是您忘记添加 this（必须是 onClick={this.someCallback}，其中 someCallback 需要在您的 React 组件中。
要导入 react-browserifies 按钮，您需要添加
var Button = require('react-bootstrap').Button
到您的 app.jsx 文件
我想使用 npm 创建一个项目，并想在其中使用 react-bootstrap。我有 package.json 具有以下依赖项。
{
"name": "simple-webapp",
"version": "0.0.1",
"description": "",
"scripts": {
"build": "gulp build",
"watch": "gulp watch --color",
"test": "echo \"This project doesn't have any tests.\" && exit 0"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "3.8.11",
"qwest": "^1.5.12",
"react": "0.13.2",
"syrup": "0.1.14",
"bootstrap": "3.3.5",
"react-bootstrap": "0.13.3",
"react-router": "0.13.3"
}
}
当我 运行 npm install 我得到：
npm WARN package.json simple-webapp@0.0.1 No description
npm WARN package.json simple-webapp@0.0.1 No repository field.
npm WARN package.json simple-webapp@0.0.1 No README data
> fsevents@0.3.6 install /Users/i-danielk/ideaProjects/webapi_bootstrap/webapp/node_modules/syrup/node_modules/watchify/node_modules/chokidar/node_modules/fsevents
> node-gyp rebuild
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
SOLINK_MODULE(target) Release/.node
SOLINK_MODULE(target) Release/.node: Finished
CXX(target) Release/obj.target/fse/fsevents.o
SOLINK_MODULE(target) Release/fse.node
SOLINK_MODULE(target) Release/fse.node: Finished
qwest@1.7.0 node_modules/qwest
react-bootstrap@0.13.3 node_modules/react-bootstrap
react-router@0.13.3 node_modules/react-router
├── object-assign@2.1.1
└── qs@2.4.1
gulp@3.8.11 node_modules/gulp
├── pretty-hrtime@0.2.2
├── interpret@0.3.10
├── deprecated@0.0.1
├── archy@1.0.0
├── minimist@1.1.1
├── tildify@1.1.0 (os-homedir@1.0.0)
├── v8flags@2.0.7 (user-home@1.1.1)
├── semver@4.3.6
├── chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)
├── gulp-util@3.0.5 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reescape@3.0.0, lodash._reevaluate@3.0.0, beeper@1.1.0, lodash._reinterpolate@3.0.0, object-assign@2.1.1, replace-ext@0.0.1, vinyl@0.4.6, chalk@1.0.0, lodash.template@3.6.1, through2@0.6.5, multipipe@0.1.2, dateformat@1.0.11)
├── liftoff@2.1.0 (extend@2.0.1, rechoir@0.6.1, flagged-respawn@0.3.1, resolve@1.1.6, findup-sync@0.2.1)
└── vinyl-fs@0.3.13 (graceful-fs@3.0.8, strip-bom@1.0.0, defaults@1.0.2, vinyl@0.4.6, mkdirp@0.5.1, through2@0.6.5, glob-stream@3.1.18, glob-watcher@0.0.6)
bootstrap@3.3.5 node_modules/bootstrap
react@0.13.2 node_modules/react
└── envify@3.4.0 (through@2.3.7, jstransform@10.1.0)
syrup@0.1.14 node_modules/syrup
├── minimist@1.1.0
├── q@1.0.1
├── run-sequence@1.0.2 (chalk@1.0.0)
├── jshint-stylish@1.0.0 (text-table@0.2.0, string-length@1.0.0, chalk@0.5.1, log-symbols@1.0.2)
├── vinyl-source-stream@1.1.0 (vinyl@0.4.6, through2@0.6.5)
├── gulp-plumber@1.0.0 (through2@0.6.5)
├── gulp-replace@0.5.3 (istextorbinary@1.0.2, replacestream@2.0.0, through2@0.6.3)
├── gulp-sourcemaps@1.5.1 (graceful-fs@3.0.8, convert-source-map@1.1.1, strip-bom@1.0.0, vinyl@0.4.6, through2@0.6.5)
├── vinyl-buffer@1.0.0 (through2@0.6.5, bl@0.9.4)
├── del@0.1.3 (is-path-cwd@1.0.0, each-async@1.1.1, is-path-in-cwd@1.0.0, globby@0.1.1, rimraf@2.4.0)
├── gulp-if@1.2.5 (through2@0.6.5, gulp-match@0.2.1, ternary-stream@1.2.3)
├── express@4.10.1 (merge-descriptors@0.0.2, utils-merge@1.0.0, cookie@0.1.2, fresh@0.2.4, escape-html@1.0.1, range-parser@1.0.2, cookie-signature@1.0.5, finalhandler@0.3.2, vary@1.0.0, media-typer@0.3.0, methods@1.1.0, parseurl@1.3.0, serve-static@1.7.2, content-disposition@0.5.0, path-to-regexp@0.1.3, depd@1.0.1, qs@2.3.2, on-finished@2.1.1, debug@2.1.3, etag@1.5.1, proxy-addr@1.0.8, send@0.10.1, accepts@1.1.4, type-is@1.5.7)
├── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, vinyl@0.4.6, chalk@0.5.1, lodash.template@2.4.1, through2@0.6.5, multipipe@0.1.2, dateformat@1.0.11, lodash@2.4.2)
├── watchify@2.4.0 (through2@0.5.1, chokidar@0.12.6)
├── gulp-uglify@1.1.0 (deepmerge@0.2.10, through2@0.6.5, vinyl-sourcemaps-apply@0.1.4, uglify-js@2.4.16)
├── gulp-cache-breaker@0.0.3 (gulp-replace@0.4.0, checksum@0.1.1, request@2.58.0)
├── stringify@3.1.0 (through@2.3.7, stream-spec@0.3.5, html-minifier@0.6.9)
├── browserify@9.0.3 (https-browserify@0.0.0, tty-browserify@0.0.0, builtins@0.0.7, constants-browserify@0.0.1, process@0.10.1, path-browserify@0.0.0, os-browserify@0.1.2, isarray@0.0.1, inherits@2.0.1, commondir@0.0.1, string_decoder@0.10.31, stream-browserify@1.0.0, defined@0.0.0, has@1.0.0, shell-quote@0.0.1, subarg@1.0.0, domain-browser@1.1.4, xtend@3.0.0, shallow-copy@0.0.1, duplexer2@0.0.2, deep-equal@1.0.0, querystring-es3@0.2.1, assert@1.3.0, punycode@1.2.4, util@0.10.3, through2@1.1.1, events@1.0.2, timers-browserify@1.4.1, concat-stream@1.4.10, parents@1.0.1, console-browserify@1.1.0, vm-browserify@0.0.4, http-browserify@1.7.0, readable-stream@1.1.13, shasum@1.0.1, url@0.10.3, resolve@1.1.6, browser-resolve@1.9.0, labeled-stream-splicer@1.0.2, buffer@3.2.2, glob@4.5.3, JSONStream@0.10.0, deps-sort@1.3.9, syntax-error@1.1.4, browser-pack@4.0.4, crypto-browserify@3.9.14, insert-module-globals@6.5.0, browserify-zlib@0.1.4, module-deps@3.8.1)
├── griddle@0.1.2 (sane@0.8.1, handlebars@2.0.0)
├── gulp-react@3.0.1 (object-assign@2.1.1, through2@0.6.5, vinyl-sourcemaps-apply@0.1.4, react-tools@0.13.3)
├── gulp-jshint@1.9.0 (minimatch@1.0.0, through2@0.6.5, lodash@2.4.2, rcloader@0.1.4, jshint@2.8.0)
├── gulp-autoprefixer@1.0.1 (object-assign@1.0.0, through2@0.6.5, vinyl-sourcemaps-apply@0.1.4, autoprefixer-core@3.1.2)
├── babelify@6.0.1 (through@2.3.4, lodash@3.9.3, babel-core@5.5.8)
└── gulp-less@1.3.6 (convert-source-map@0.4.1, lodash.defaults@2.4.1, through2@0.5.1, vinyl-sourcemaps-apply@0.1.4, less@1.7.5)
安装成功了吗？
在我的 app/main.jsx 里面有一个按钮：
<Button bsStyle="success" bsSize="small" onClick={someCallback}>
Something
</Button>
当我运行npm run build时，我得到：
/Users/i-danielk/ideaProjects/webapi_bootstrap/webapp/app/main.js
line 27 col 33 'Button' is not defined.
line 27 col 88 'someCallback' is not defined.
我哪里做错了？
看起来安装成功了。导致错误的原因是您不需要 react-bootstrap 所以 Button 未定义。另一个错误是您忘记添加 this（必须是 onClick={this.someCallback}，其中 someCallback 需要在您的 React 组件中。
要导入 react-browserifies 按钮，您需要添加
var Button = require('react-bootstrap').Button
到您的 app.jsx 文件