从javascript包的子文件夹导入

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

从“我的库/按钮”导入{按钮，按钮操作}
从“我的库/输入”导入{Input，Textarea}
从“我的库/网格”导入{Row，Column}

这是目录结构：

我在

src/

下有一个主

索引.ts

，其中包含：

export*from./button'；
从“./input”导出*；
从“./grid”导出*；

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

import{Button，Input，InputProps，Row，Column}来自“我的库”

但我不想要这个。我想通过名称空间访问每个模块。如果我从

index.ts

文件中删除导出，我所能做的就是：

从'my lib/dist/Button'导入{Button}

这是我以前没见过的。将

dist/

添加到import语句意味着我正在通过相对路径访问模块。我想要

我的库/按钮

我正在使用汇总。我尝试使用

别名
插件，但没有成功。下面是我的汇总配置：

const customResolver=resolve({
扩展名：['ts']，
});
导出默认值{
输入：`src/index.ts`，
输出：[
{
文件：pkg.main，
格式：“cjs”，
sourcemap:true，
//插件：[terser（）]，
},
{
文件：pkg.module，
格式：“es”，
sourcemap:true，
插件：[terser（）]，
},
],
//在此指出您不想包含在捆绑包中的外部模块（即：“lodash”）
外部：[]，
观察：{
包括：“src/**”，
},
插件：[
//允许json解析
json（），
//编译类型脚本文件
typescript（{usetConfigDecrationDir:true}），
//允许绑定cjs模块（与Web包不同，汇总不理解cjs）
commonjs（），
//允许节点_模块解析，因此您可以使用“外部”来控制
//捆绑包中包括哪些外部模块
// https://github.com/rollup/rollup-plugin-node-resolve#usage
resolve（），
//将源映射解析为原始源
sourceMaps（），
别名({
参赛作品：[
{查找：'my lib/button'，替换：'./dist/button'}，
{查找：'my lib/input'，替换：'./dist/input'}，
{查找：'my lib/grid'，替换：'./dist/grid'}，
],
自定义解析器，
}),
],
};

这是
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
相同的结构

人们建议使用别名或命名导出，但我无法让它工作

与我的问题最接近的是以下问题：


我想通过
typescript
和
rollup
实现同样的目标

我想我错过了一些东西，谢谢。
首先，我想我和你唯一的区别是

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

及

只是多了一个目录级别

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

实际上，您举的两个库都是在根目录下分发文件的：直接在根目录下有
js
文件，而在其
tsconfig.json
文件中没有
outDir
选项（这意味着将输出文件写入根目录）

希望这能有所帮助。
经过多次尝试和错误后，我通过传入输入列表、使用和选项以及一个简单的安装后脚本，实现了这一点

这是我的rollup.config.js

const options = {
  input: [
    'src/index.ts',
    'src/api/index.ts',
    'src/components/index.ts',
    'src/contexts/index.ts',
    'src/hooks/index.ts',
    'src/lib/index.ts',
    'src/types/index.ts',
    'src/utils/index.ts',
    'src/UI/index.ts',
  ],
  output: [
    {
      format: 'cjs',
      dir: 'dist',
      exports: 'auto',
      preserveModules: true,
      preserveModulesRoot: 'src',
      sourcemap: true,
    },
  ],
  plugins: [
    // Preferably set as first plugin.
    peerDepsExternal(),
    typescript({
      tsconfig: './tsconfig.rollup.json',
    }),
    postcss({
      extract: false,
      modules: true,
      use: ['sass'],
    }),
  ],
};

export default options;


脚本/postinstall.sh

#/usr/bin/env bash
set-e；
#如果npm安装用于开发，则跳过安装后
#dist中不包括rollup.config.js
如果[-f“rollup.config.js”]；然后
echo“跳过包的安装后例程。”；
出口0；
fi
echo“正在将文件从dist文件夹复制到根项目文件夹…”
cp-r区/*./&rm-rf区
echo“安装完毕！”

package.json

“脚本”：{
“postinstall”：“/scripts/postinstall.sh”，
},

这将编译所有文件并将其输出到dist文件夹。安装后脚本将所有文件从dist复制到根项目文件夹中

注意*：在本地运行npm安装时，应跳过安装后脚本。这是通过检查rollup.config.js是否存在来完成的。
这是可能的，但需要一些额外的步骤。A如上所述，这是Material UI采取的方法

诀窍是发布一个策划的
dist
文件夹，而不是您的回购的根文件夹

建筑
首先，让我们明确一点，不管您的库是使用CommonJS还是ESM构建的。这与模块分辨率有关

假设项目名为
mypackage

现在，在我们构建了
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
  my-package/
    package.json
    dist/
      index.js

解决
一旦安装，考虑此导入：
import myProject from "my-project";

模块分解器将实现这一点（大大简化，因为此处与模块分解器无关）：


转到
节点\u模块
查找我的项目
加载
package.json
在
main
或
module

因为我们有

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

解析子路径
分辨率算法将与

node_modules
  my-project/
    somthing.js

也有

node_modules
  my-project/
    something/
      index.js

和

node_modules
  my-project/
    something/
      package.json

在后一种情况下，它将再次
node_modules
  my-project/
    something/
      index.js

node_modules
  my-project/
    something/
      package.json

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

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

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