javascript - 从 javascript 包的子文件夹导入

Question

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

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

这是目录结构:

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

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

使用这种风格，我可以做到:

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

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

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

这是我以前没有看到的。添加 dist/导入语句意味着我正在通过相对路径访问模块。我要 my-lib/Button .
我正在使用汇总。我尝试使用 alias插件但没有用。以下是我的汇总配置:

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"]
}

不知道怎么实现和 lodash/xxx一样的结构或 material-ui/yyy与汇总。
人们建议使用别名或命名导出，但我无法使其工作。
最接近我的问题的是以下问题:
Import from subfolder of npm package
我想实现同样的目标，但使用 typescript和 rollup .
我想我错过了一些东西，谢谢。

Answer 1

这是可能的，但需要一些额外的步骤。上面提到过，这是 Material-UI 采取的方法。
诀窍是发布精选的dist文件夹，而不是你的仓库的根文件夹。
build
首先，让我们明确一点，您的库是使用 CommonJS 还是 ESM 构建的并不重要。这大约是 模块分辨率 .
假设项目名为 my-package .
现在大部分项目，在我们建好后src/至dist/会有

my-package
  package.json
  src/
    index.js
  dist/
    index.js

并在 package.json

"main": "dist/index.js"

或对于 esm

"module": "dist/index.js"

出版
大多数项目只需添加 .npmignore并发布项目的根目录，所以安装后项目会在 node_modules 中结束像这样:

node_modules
  my-package/
    package.json
    dist/
      index.js

正在解决
安装后，考虑这个导入:

import myProject from "my-project";

模块解析器将执行此操作(大大简化，因为 full algorithm 在这里无关紧要):

转至 node_modules

查找 my-project

加载package.json

返回 main 中的文件或 module

这会起作用，因为我们有

node_modules
  my-package/
    package.json
    dist/
      index.js

解析子路径

import something from "my-project/something";

分辨率算法将与

node_modules
  my-project/
    somthing.js

也与

node_modules
  my-project/
    something/
      index.js

与

node_modules
  my-project/
    something/
      package.json

在后一种情况下，它将再次查看 main或 module .
但我们有:

node_modules
  my-package/
    package.json
    dist/
      index.js

诀窍
诀窍是，不要使用它的 dist 发布您的项目根目录。文件夹，以“坦白” dist文件夹并发布 dist使用 npm publish dist 的文件夹反而。
Frank(如 frank 一封信)意味着您需要创建一个 package.json在您的 dist文件夹;添加 README.md LICENSE等等
可以在 here 中找到一个相当简短的示例来说明如何做到这一点。 .
因此，鉴于我们在构建之后:

node_modules
  my-package/
    package.json
    dist/
      index.js
      something.js

一旦发布，我们得到

node_modules
  my-project/
    package.json
    index.js
    something.js

在哪里 package.json是策划的。