React/TypeScript组件库如何实现子路径导入？

我搭了一个基于React、TypeScript和Webpack的组件库，目录结构是这样的：

- src
  - ui-components
      - ComponentA
      - ComponentB
      - index.ts
  - plugins
      - PluginA
      - PluginB
      - index.ts
  - index.ts

各个index.ts的内容：

• src/index.ts：

export * from './ui-components';
export * from './plugins';

• src/ui-components/index.ts：

export * from './ComponentA';
export * from './ComponentB';

• src/plugins/index.ts：

export * from './PluginA';
export * from './PluginB';

当前package.json的相关配置片段：

"main": "dist/index.js",
  "module": "dist/index.js",
  "typings": "dist/index.d.ts",
  "files": [
    "dist/**"
  ],
  "exports": {
    "./ui-components": {
        "import": "./dist/ui-components/index.d.ts"
    },
    "./plugins": {
      "import": "./dist/plugins/index.d.ts"
  }

现在导入组件只能这么写：

import { ComponentA } from 'myLibrary';
// 或者
import { ComponentA } from 'myLibrary/dist/ui-components'

想改成下面这种更简洁的导入方式：

import { ComponentA } from 'myLibrary/ui-components'
import { PluginA } from 'myLibrary/plugins'

解决办法 #

1. 修正package.json的exports配置 #

你现在的exports只写了类型文件，没指定对应的JS模块入口，得补全配置，同时覆盖ES模块和CommonJS的入口，还要关联好类型文件：

修改后的exports应该是这样：

"exports": {
  ".": {
    "import": "./dist/index.js",
    "require": "./dist/index.js",
    "types": "./dist/index.d.ts"
  },
  "./ui-components": {
    "import": "./dist/ui-components/index.js",
    "require": "./dist/ui-components/index.js",
    "types": "./dist/ui-components/index.d.ts"
  },
  "./plugins": {
    "import": "./dist/plugins/index.js",
    "require": "./dist/plugins/index.js",
    "types": "./dist/plugins/index.d.ts"
  }
}

• 补全根路径.的配置，保证主入口正常使用；
• 每个子路径同时指定JS文件和类型文件，让Node和TypeScript都能正确解析。

2. 让Webpack正确编译子目录 #

得配置Webpack把src/ui-components和src/plugins分别编译到dist对应的子目录里，保持结构一致。

修改Webpack的entry配置：

module.exports = {
  entry: {
    index: './src/index.ts',
    'ui-components/index': './src/ui-components/index.ts',
    'plugins/index': './src/plugins/index.ts'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    library: {
      type: 'module' // 如果是纯ES模块库就这么设，要兼容CommonJS的话可以改成umd
    }
  },
  // 其他resolve、module、plugins等配置不变...
};

这样Webpack会把每个入口文件编译到dist对应的子目录下。

3. 调整TypeScript配置 #

得保证tsconfig.json里的outDir指向dist，并且开了declaration，让TS自动把类型文件生成到对应目录：

{
  "compilerOptions": {
    "outDir": "./dist",
    "declaration": true,
    "declarationDir": "./dist",
    // 其他target、module、jsx等配置按需设置...
  },
  "include": ["src/**/*"]
}

编译之后，dist的ui-components和plugins目录下会同时有.js和.d.ts文件。

4. 验证效果 #

重新编译组件库，然后在新项目里就能用你想要的导入方式了：

import { ComponentA } from 'myLibrary/ui-components'
import { PluginA } from 'myLibrary/plugins'

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