reactjs - 使用 Gulp、Browserify 和 Babel 构建 React 组件

Question

我创建了一个 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 应用程序使用此组件时，我收到错误:

Error: Cannot find module ' ./emptyFunction'.

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

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

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

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

我错过了什么？

编辑:

正如我所见，奇怪的requires来自于在组件文件中要求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 .

Answer 1

根据您最近的解释，您可能需要在浏览组件时执行类似的操作:

browserify('./src/Foo.js')
// Note this call:
.external("react")
.transform(babelify)
.bundle()

该问题与 gulp 无关。我也不知道您如何/何时收到评论中描述的运行时错误。根据您的最新信息，问题是您正在使用 browserify 创建 bundle A，然后使用 browserify 创建 bundle B，其中 A它的依赖关系图，并且 browserify 正在尝试解析已经捆绑在 A 中的相关 require()。引用自this answer如何处理:

以下是一些选项:

• 运行 derequire在使用/发布之前在捆绑A上。

• 尝试像这样浏览器化您的应用:

  browserify({
    entries: ['./entry'],
    noParse: ['my-components-in-node-modules'],
  })
  

  如果不起作用，请尝试绝对路径 (require.resolve('my-components-in-node-modules'))。

• 在使用之前压缩包 A。

有关该问题的更详细说明可以在 substack/node-browserify#1151 中找到。 .

我不确定将 React 与您的组件捆绑在一起是否可行。我不确定，但我认为在这种情况下，人们必须对等依赖 React(隐式或显式)。在 bundle 中包含 React 意味着不同的组件将尝试使用不同的 React 实例，这可能会给您带来问题，并且肯定会导致每个组件的 node_modules 目录膨胀。