React新手求助：使用Gulp+Browserify时多文件能否自动打包？

嘿，完全理解你的困惑！我刚接触Browserify的时候也有过一模一样的疑问，别担心，这绝对不是什么“浅显到不值得问”的问题～

答案是肯定的：只要你已经把所有必要的React文件都正确导入到App.js中，Browserify会自动把它们全部打包进去。

Browserify的核心工作逻辑就是遍历入口文件的依赖树——它会从你指定的入口（比如App.js）开始，查找所有通过require()或者ES6的import引入的模块，不管是直接导入的组件，还是组件里又嵌套导入的工具函数、配置文件（如果配置了对应转换插件，甚至样式文件也能处理），都会被递归地收集起来，最终合并成一个完整的bundle文件。

举个直观的例子：

• 你在App.js里导入了Header.js和TodoList.js
• 而TodoList.js又导入了TodoItem.js和api.js

这种情况下，Browserify打包时会把Header.js、TodoList.js、TodoItem.js、api.js还有App.js本身的代码全部整合到最终的输出文件里，不需要你额外把这些文件一个个列给Browserify。

顺便给你一个常见的Gulp+Browserify配置示例（配合Babel转译JSX和ES6语法）：

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

gulp.task('build', function() {
  return browserify({
    entries: ['./src/App.js'], // 唯一需要指定的就是入口文件
    extensions: ['.js', '.jsx'],
    debug: true
  })
  .transform(babelify, { presets: ['@babel/preset-react', '@babel/preset-env'] })
  .bundle()
  .pipe(source('app.bundle.js'))
  .pipe(gulp.dest('./dist'));
});

只要你的导入语句都没问题，运行这个Gulp任务后，dist/app.bundle.js就会包含所有你项目里用到的React组件和相关代码啦。

内容的提问来源于stack exchange，提问作者Amir Shahbabaie