ES6 Modules：React Native项目如何从index.js自动重导出所有类型？

Hey, I feel your pain—manually maintaining those import/export blocks in every index.js is such a chore. Luckily, there are a couple of solid solutions that let you auto-reexport all files in a directory while keeping Flow's type inference intact. Let's break them down:

This is the most straightforward and customizable approach. We'll write a simple script that scans your target directory, builds the import/export statements, and writes them to index.js—no more manual typing.

Step 1: Write the Generation Script #

Create a file called generate-index.js in your project root with this code:

const fs = require('fs');
const path = require('path');

// Target directory (pass a path via CLI args, or use a default)
const targetDir = process.argv[2] || './src/components';
const indexPath = path.join(targetDir, 'index.js');

// Files/dirs to exclude (tweak this to match your project's needs)
const excludePatterns = [
  /^index\.js$/,       // Skip the index file itself
  /\.test\.js$/,       // Skip test files
  /\.flow\.js$/,       // Skip Flow declaration files
  /^\./,               // Skip hidden files
  /^__/                // Skip directories like __tests__
];

// Get all valid .js files in the directory
const files = fs.readdirSync(targetDir)
  .filter(file => {
    const fullPath = path.join(targetDir, file);
    const stats = fs.statSync(fullPath);
    return stats.isFile() && file.endsWith('.js') && !excludePatterns.some(pattern => pattern.test(file));
  });

// Build import and export lines
const importLines = files.map(file => {
  const moduleName = path.basename(file, '.js');
  return `import ${moduleName} from './${moduleName}';`;
}).join('\n');

const exportLine = `export { ${files.map(file => path.basename(file, '.js')).join(', ')} };`;

// Put it all together (with Flow comment for type support)
const indexContent = `// @flow
${importLines}

${exportLine}
`;

// Write the file
fs.writeFileSync(indexPath, indexContent, 'utf8');
console.log(`✅ Successfully generated ${indexPath}`);

Step 2: Run the Script #

Execute it in your terminal, passing the directory you want to process:

node generate-index.js ./src/your-target-folder

If you need to update multiple index.js files at once, just add more commands (or modify the script to loop through directories).

Step 3: Integrate into Your Workflow (Optional) #

To avoid running the script manually every time you add a file, add it to your package.json scripts:

{
  "scripts": {
    "generate-index": "node generate-index.js ./src/components && node generate-index.js ./src/models"
  }
}

You can even use nodemon to auto-run the script when files change:

nodemon --watch ./src/components --ext js --exec "node generate-index.js ./src/components"

Why This Works with Flow #

The script generates standard ES module import/export statements—Flow will parse this auto-generated index.js just like it would a manually written one, so all type inference stays intact. No extra configuration needed here.

If you prefer not to have auto-generated files cluttering up your repo, a Babel plugin can handle the reexporting at compile time while keeping Flow happy.

Step 1: Install the Plugin #

Grab babel-plugin-export-all-from via npm:

npm install --save-dev babel-plugin-export-all-from

Step 2: Configure Babel #

Add the plugin to your babel.config.js or .babelrc:

{
  "plugins": [
    ["export-all-from", {
      "exclude": ["index.js", "*.test.js", "*.flow.js"]
    }]
  ]
}

Step 3: Simplify Your index.js #

Now your index.js can be stripped down to just this:

// @flow
export * from '.';

The plugin will automatically expand this line to reexport all valid files in the directory during compilation.

Flow Compatibility Note #

This plugin transforms the shorthand export * from '.' into explicit import/export statements before Flow runs its type check. As long as you're using a compatible version of Flow and Babel, type inference will work exactly as it did with your manual index.js files. I'd recommend testing this with your project's specific version combo first, though.

• Always tweak the exclusion patterns to match your project—you don't want to accidentally export test files or internal utilities.
• If your project mixes default and named exports, adjust the Node script to handle that (e.g., use import * as ${moduleName} from './${moduleName}' if you need to capture all exports).
• For the script approach, avoid manually editing the generated index.js—let the script handle all changes to prevent conflicts.

内容的提问来源于stack exchange，提问作者James Ko