从子文件夹导入 javascript 包 [英] Importing from subfolders for a javascript package

问题描述

我有一个由多个文件夹组成的打字稿库.每个文件夹都包含一个 index.ts 文件，该文件导出一些业务逻辑.我正在尝试将其与汇总绑定以在调用站点上实现此行为:

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:

import { Button, ButtonProps } from 'my-lib/button'
import { Input, Textarea } from 'my-lib/input'
import { Row, Column } from 'my-lib/grid'

这是目录结构:

我在 src/ 下有一个主要的 index.ts，其中包含:

I have a main index.ts under src/ which contains:

export * from './button';
export * from './input';
export * from './grid';

有了这种风格，我可以做到:

With this style, I can do:

import { Button, Input, InputProps, Row, Column } from 'my-lib'

但我不想要这个.我想通过它们的命名空间访问每个模块.如果我从 index.ts 文件中删除导出，我所能做的就是:

But I don't want this. I want to access to each module by their namespaces. If I remove exports from the index.ts file, all I can do is:

import { Button } from 'my-lib/dist/button'

这是我以前没有看到的.将 dist/ 添加到导入语句意味着我通过相对路径访问模块.我想要 my-lib/Button.

which is something I didn't see before. Adding dist/ to the import statement means I am accessing the modules via a relative path. I want my-lib/Button.

我正在使用汇总.我尝试使用 alias 插件但没有用.以下是我的汇总配置:

I am using rollup. I tried to use alias plugin but didn't work. Below is my rollup config:

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,
    }),
  ],
};

这是 tsconfig 文件:

{
  "compilerOptions": {
    "target": "es5",
    "module": "ES6",
    "lib": ["ES2017", "ES7", "ES6", "DOM"],
    "declaration": true,
    "declarationDir": "dist",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "allowJs": false,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "baseUrl": "./src",
    "paths": {
      "my-lib/button": ["./src/button"],
      "my-lib/input": ["./src/input"],
      "my-lib/grid": ["./src/grid"]
    }
  },
  "exclude": ["node_modules", "dist", "**/*.test.ts"],
  "include": ["src/**/*.ts"]
}

我不知道如何通过 rollup 实现与 lodash/xxx 或 material-ui/yyy 相同的结构.

I don't know how to achieve the same structure as lodash/xxx or material-ui/yyy with rollup.

人们建议使用别名或命名导出，但我无法实现.

People suggest aliases or named exports but I couldn't make it work.

最接近我的问题的是下面的问题:

The closest thing to my problem is below question:

从 npm 包的子文件夹导入

我想用 typescript 和 rollup 来达到同样的效果.

I want to achieve the same thing but with typescript and rollup.

我想我遗漏了什么，谢谢.

I think I am missing something, thanks.

推荐答案

首先，唯一的区别

import { Button } from 'my-lib/dist/button'

和

import { Button } from 'my-lib/button'

只是多了一层目录.

曾经说过，在您的 tsconfig.json 文件中有 "outDir":"dist", 之前，您需要添加 dist/ 到您的 import 语句.

Once said that, until you have "outDir": "dist", in your tsconfig.json file you need to add dist/ to your import statements.

确实，你举的两个库都是直接在根目录下分发文件的:lodash根目录中有 js 文件，而 material-ui 在其 tsconfig.json 文件中没有 outDir 选项(这意味着将输出文件写入根目录).

Indeed, both the libraries you taken as example are distributed with files in the root directory: lodash directly has js files in the root, while material-ui has not outDir option in its tsconfig.json file (which means to write output files to root directory).

希望这会有所帮助.

这篇关于从子文件夹导入 javascript 包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！