Lodash如何支持单独模块导入？自研ES6库求同类实现方案指导

Hey there! I totally get why Lodash’s setup might feel confusing at first—its dist folder only has the full library bundles, but you can still import individual modules like lodash/map. Let me walk you through how this works, and how you can build the same functionality for your own library.

First: Lodash’s Secret Isn’t in the dist Folder #

Lodash doesn’t rely on dist for individual module imports. Instead, it uses per-module entry points configured in its package.json and a modular source code structure. When you run import map from 'lodash/map', Node.js or your bundler (Webpack/Rollup) is actually pulling directly from a dedicated module file in Lodash’s source (or a compiled version of it), not the full bundle in dist.

Step-by-Step to Implement This for Your Library #

1. Organize Your Source Code Modularly #

Start by splitting your library into small, self-contained modules. For example:

your-lib/
├── src/
│   ├── index.js       # Full library entry (exports all modules)
│   ├── modules/
│   │   ├── utilityA.js
│   │   ├── utilityB.js
│   │   └── utilityC.js
│   └── utils/          # Shared helper functions (if needed)
│       └── common.js
└── package.json

• Each utility*.js should export a single function/feature.
• src/index.js imports and re-exports all modules for full-library imports:

  import utilityA from './modules/utilityA.js';
  import utilityB from './modules/utilityB.js';
  import utilityC from './modules/utilityC.js';
  
  // Export as a default object for full-library usage
  export default {
    utilityA,
    utilityB,
    utilityC
  };
  
  // Or export individually for better tree-shaking support
  export { utilityA, utilityB, utilityC };
  

2. Configure package.json for Multiple Entry Points #

Use the exports field (the modern standard) to define both the full library entry and individual module entries. This tells Node.js and bundlers where to find each import path. Here’s an example:

{
  "name": "your-lib",
  "main": "./dist/index.cjs.js",       // CommonJS full bundle
  "module": "./dist/index.esm.js",     // ES module full bundle
  "exports": {
    ".": {
      "import": "./dist/index.esm.js",
      "require": "./dist/index.cjs.js"
    },
    "./utilityA": {
      "import": "./dist/modules/utilityA.esm.js",
      "require": "./dist/modules/utilityA.cjs.js"
    },
    "./utilityB": {
      "import": "./dist/modules/utilityB.esm.js",
      "require": "./dist/modules/utilityB.cjs.js"
    }
  }
}

This lets users import in two ways:

• Full library: import yourLib from 'your-lib' or const yourLib = require('your-lib')
• Individual module: import utilityA from 'your-lib/utilityA' or const utilityA = require('your-lib/utilityA')

3. Configure Your Build Tool to Compile Multiple Entries #

Use a bundler like Rollup or Webpack to compile both the full library and each individual module. Here’s a simplified Rollup config example (rollup.config.js):

import { babel } from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: {
    // Full library entry
    index: './src/index.js',
    // Individual module entries
    'modules/utilityA': './src/modules/utilityA.js',
    'modules/utilityB': './src/modules/utilityB.js',
    'modules/utilityC': './src/modules/utilityC.js'
  },
  output: [
    // Compile to ES modules
    {
      dir: 'dist',
      format: 'esm',
      entryFileNames: '[name].esm.js'
    },
    // Compile to CommonJS
    {
      dir: 'dist',
      format: 'cjs',
      entryFileNames: '[name].cjs.js'
    }
  ],
  plugins: [
    resolve(),
    babel({ babelHelpers: 'bundled' }) // Transpile ES6 to compatible code
  ]
};

When you run rollup -c, this will generate all the necessary files in your dist folder:

• dist/index.esm.js / dist/index.cjs.js (full library)
• dist/modules/utilityA.esm.js / dist/modules/utilityA.cjs.js (individual modules)

4. Test Your Imports #

After building, test both import styles in a sample project to make sure they work:

// Full import
import yourLib from 'your-lib';
yourLib.utilityA();

// Individual import
import utilityB from 'your-lib/utilityB';
utilityB();

Key Notes #

• Tree Shaking: If you export individual functions from your index.js (instead of a default object), bundlers like Webpack/Rollup can automatically eliminate unused code when users import the full library.
• Avoid Duplication: If your modules share helper functions, your bundler should handle deduplication automatically, but you can optimize further with tools like @rollup/plugin-commonjs or Webpack’s split chunks feature.

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