从子文件夹导入javascript程序包

阿利克斯

我有一个打字稿库,包含多个文件夹。每个文件夹包含一个index.ts文件,该文件导出一些业务逻辑。我试图将其与汇总捆绑在一起,以在呼叫站点上实现此行为:

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

这是目录结构:

在此处输入图片说明

我有一个主index.tssrc/包含:

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/到import语句意味着我正在通过相对路径访问模块。我要my-lib/Button

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

And this is the tsconfig file:

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

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:

Import from subfolder of npm package

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

I think I am missing something, thanks.

Daniele Ricci

First of all, the only difference between

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

and

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

is just one more directory level.

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-uioutDir在其tsconfig.json文件中没有选项(这意味着将输出文件写入根目录)。

希望这可以帮助。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

文件夹路径!=程序包名称

从子文件夹导入模块

从子文件夹导入模块

从子文件夹导入Django模块

在Python中从子文件夹导入

仅当从已安装的包调用时,从子文件夹导入Python失败

在Android程序包中访问资源文件夹和原始文件夹中的文件列表

Nuget将文件从程序包文件夹复制到项目目录

配置Aurelia CLI以从子文件夹提供应用程序捆绑包

如何在Maven的“程序包”上重新生成目标文件夹?

在同一程序包中创建一个单独的文件夹... [ECLIPSE]

如何将整个文件夹或程序包从Java转换为Objective-C?

Google App Engine Flexible是否可以访问由程序包动态创建的文件夹?

NuGet程序包引用在项目中导致新文件夹

如何将特定文件夹作为程序包部署

ddev为共享的作曲家程序包挂载其他文件夹

将文件夹权限分配给“所有应用程序包”组

在android应用程序包中指定自定义文件夹地址

npm本地路径-是否可以从子文件夹导入?

从npm包的子文件夹导入

通过命令行运行程序包代码,而无需进入该程序包的文件夹

将模块从子文件夹导入到父文件夹

无法从MSBuild引用Nuget程序包的“工具”文件夹中的可执行文件

如何使用MSBuild为该项目文件夹中的所有文件创建MSdeploy程序包

创建的程序包未运行NAMESPACE文件中导入的程序包的功能

如何将自定义作曲家程序包放在Laravel的vendor文件夹之外?

在应用程序包中包含所有可绘制文件夹的图标是否必不可少?

UWP远程调试错误DEP4300-无法为应用程序包生成根文件夹

为什么R找不到与主程序包相同的本地文件夹中的依赖项?

TOP 榜单

热门标签

归档