我创建了一个 React 组件，我想分发这个组件的内置版本（用 gulp 构建），所以gulpfile.js我有：

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

gulp.task('build-js', function() {
    return browserify('./src/Foo.js')
        .transform(babelify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./dist'));
});

gulp.task('build', ['build-js']);

在.babelrc：

{
  "presets": ["es2015", "react", "stage-0"],
}

这些是依赖项package.json：

"dependencies": {
    "react": "^0.14.7"
}
"devDependencies": {
  "babel-polyfill": "^6.3.14",
  "babel-preset-es2015": "^6.3.13",
  "babel-preset-react": "^6.3.13",
  "babel-preset-stage-0": "^6.3.13",
  "babelify": "^7.2.0",
  "browserify": "^13.0.0",
  "gulp": "^3.9.1",
  "react": "^0.14.7",
  "react-dom": "^0.14.7",
  "vinyl-source-stream": "^1.1.0"
}

当我运行gulp build（之后npm install）build.js文件是在 下创建的/dist，但是当我尝试从其他 React 应用程序使用此组件时，我收到错误消息：

错误：找不到module“./emptyFunction”。

如果我深入研究这个文件 ( build.js)，我可以看到以下几行：

var emptyFunction = require('./emptyFunction');
...
var camelize = require('./camelize');

这些文件在 下不存在./dist，因此当我尝试构建调用组件的新 React 应用程序时抛出错误：

import Foo from 'my-components-in-node-modules';

我错过了什么？

编辑：

正如我所看到的，奇怪的要求来自在组件文件中要求 React：

var React = require('react');
// or import React from 'react';

class Foo extends React.Component {
    static propTypes = {...};
    static defaultProps = {...};
    render() {...}
}
export default Foo; 

如果我删除var React = require('react');那些要求（emptyFunction，camelize）消失，并且错误很React is not defined明显。

编辑2：

正如@JMM 所建议的那样，我应该在dist文件夹中拥有依赖项（在我的情况下是 React） ，但是我应该如何实现它？如果我的组件有更多的依赖怎么办？我以为我只需要在package.json.

编辑3：

我终于意识到我不需要browserify，只是gulp-babel：

var gulp = require('gulp');
var babel = require('gulp-babel');

gulp.task('bundle', bundle);

function bundle () {
  gulp.src('./src/*.js')
    .pipe(babel())
    .pipe(gulp.dest('./dist'));
}

gulp.task('build', ['bundle']);

就这样。完整示例在这里：react-svg-components。