title: Importing from subfolders for a javascript package
body: <p>I have a typescript library consists of multiple folders. Each folder contains an index.ts file which exports some business logic. I am trying to bundle this with rollup to achieve this behavior on the call site:</p>
  <pre class="lang-js prettyprint-override"><code>import { Button, ButtonProps } from 'my-lib/button'
  import { Input, Textarea } from 'my-lib/input'
  import { Row, Column } from 'my-lib/grid'
  </code></pre>
  <p>This is the directory structure:</p>
  <p><a href="https://i.stack.imgur.com/9jQ5m.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9jQ5m.png" alt="enter image description here" /></a></p>
  <p>I have a main <code>index.ts</code> under <code>src/</code> which contains:</p>
  <pre class="lang-js prettyprint-override"><code>export * from './button';
  export * from './input';
  export * from './grid';
  </code></pre>
  <p>With this style, I can do:</p>
  <pre class="lang-js prettyprint-override"><code>import { Button, Input, InputProps, Row, Column } from 'my-lib'
  </code></pre>
  <p>But I don't want this. I want to access to each module by their namespaces. If I remove exports from the <code>index.ts</code> file, all I can do is:</p>
  <pre class="lang-js prettyprint-override"><code>import { Button } from 'my-lib/dist/button'
  </code></pre>
  <p>which is something I didn't see before. Adding <code>dist/</code> to the import statement means I am accessing the modules via a relative path. I want <code>my-lib/Button</code>.</p>
  <p>I am using rollup. I tried to use <code>alias</code> plugin but didn't work. Below is my rollup config:</p>
  <pre class="lang-js prettyprint-override"><code>const customResolver = resolve({
    extensions: ['ts'],
  });
  
  export default {
    input: `src/index.ts`,
    output: [
      {
        file: pkg.main,
        format: 'cjs',
        sourcemap: true,
        // plugins: [terser()],
      },
      {
        file: pkg.module,
        format: 'es',
        sourcemap: true,
        plugins: [terser()],
      },
    ],
    // Indicate here external modules you don't wanna include in your bundle (i.e.: 'lodash')
    external: [],
    watch: {
      include: 'src/**',
    },
    plugins: [
      // Allow json resolution
      json(),
      // Compile TypeScript files
      typescript({ useTsconfigDeclarationDir: true }),
      // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
      commonjs(),
      // Allow node_modules resolution, so you can use 'external' to control
      // which external modules to include in the bundle
      // https://github.com/rollup/rollup-plugin-node-resolve#usage
      resolve(),
  
      // Resolve source maps to the original source
      sourceMaps(),
      alias({
        entries: [
          { find: 'my-lib/button', replacement: './dist/button' },
          { find: 'my-lib/input', replacement: './dist/input' },
          { find: 'my-lib/grid', replacement: './dist/grid' },
        ],
        customResolver,
      }),
    ],
  };
  
  </code></pre>
  <p>And this is the <code>tsconfig</code> file:</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;es5&quot;,
      &quot;module&quot;: &quot;ES6&quot;,
      &quot;lib&quot;: [&quot;ES2017&quot;, &quot;ES7&quot;, &quot;ES6&quot;, &quot;DOM&quot;],
      &quot;declaration&quot;: true,
      &quot;declarationDir&quot;: &quot;dist&quot;,
      &quot;outDir&quot;: &quot;dist&quot;,
      &quot;sourceMap&quot;: true,
      &quot;strict&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;allowJs&quot;: false,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;baseUrl&quot;: &quot;./src&quot;,
      &quot;paths&quot;: {
        &quot;my-lib/button&quot;: [&quot;./src/button&quot;],
        &quot;my-lib/input&quot;: [&quot;./src/input&quot;],
        &quot;my-lib/grid&quot;: [&quot;./src/grid&quot;]
      }
    },
    &quot;exclude&quot;: [&quot;node_modules&quot;, &quot;dist&quot;, &quot;**/*.test.ts&quot;],
    &quot;include&quot;: [&quot;src/**/*.ts&quot;]
  }
  </code></pre>
  <p>I don't know how to achieve the same structure as <code>lodash/xxx</code> or <code>material-ui/yyy</code> with rollup.</p>
  <p>People suggest aliases or named exports but I couldn't make it work.</p>
  <p>The closest thing to my problem is below question:</p>
  <p><a href="https://stackoverflow.com/questions/44345257/import-from-subfolder-of-npm-package">Import from subfolder of npm package</a></p>
  <p>I want to achieve the same thing but with <code>typescript</code> and <code>rollup</code>.</p>
  <p>I think I am missing something, thanks.</p>